Анимация 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>
По желанию можно сменить выравнивание, но мне нравится в правом верхнем углу — там он никому не мешает. Пользуйтесь или меняйте по вкусу.