Warning: mkdir(): File exists in /home/phpdesig/phpdes.com/www/wp-content/plugins/hummingbird-performance/core/class-logger.php on line 184
Анимация ajax запроса на jQuery - jQuery & Plugins | PHP Designer
adsPlace_1

Войти или Зарегистрироваться

Hosting Ukraine

Анимация ajax запроса на jQuery

Анимация ajax запроса на jQuery

Такая банальная вещь, как необходимость показать сообщение «Идет загрузка» во время ajax-запроса, привела меня к созданию своей «легкой версии» без картинки. Работает он глобально на всей странице, закрывая все элементы полупрозрачным слоем. Работает на jQuery, состоит из трех частей: HTML, CSS, и JS-кода.

HTML

<div id="loader"><span>Загрузка...</span></div>

CSS

#loader {
  position:fixed; display:none;
  top:0; left:0;
  height:100%; width:100%;
  background:#ccc; opacity:.9;
}
#loader span {
  display:block; position:absolute; right:4px; top:4px;
  color:#fff; background:#C71D72;
  padding:5px 10px;
  -webkit-border-radius: 5px; -moz-border-radius: 5px;
  border-radius: 5px; cursor:default;
}

jQuery

<script>
  // вешаем колбэки для всех jQuery.ajax-запросов
  $('#loader').ajaxSend(function(){$(this).show()})
  .ajaxStop(function(){$(this).hide()});
</script>

По желанию можно сменить выравнивание, но мне нравится в правом верхнем углу — там он никому не мешает. Пользуйтесь или меняйте по вкусу.

Последние из рубрики

Комментарии(2)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению