jQuery ajax loader
Да-с, такая банальная вещь, как необходимость показать сообщение «Идет загрузка» во время ajax-запроса, привела меня к созданию своей «легкой версии» без картинки. Работает он глобально на всей странице, закрывая все элементы полупрозрачным слоем. Лоадер работает на jQuery, состоит из трех частей: HTML, CSS, и JS-кода.
Итак,
html:
<div id="loader"><span>Загрузка...</span></div>
javascript:
<script>
// вешаем колбэки для всех jQuery.ajax-запросов
$('#loader').ajaxSend(function(){$(this).show()})
.ajaxStop(function(){$(this).hide()});
</script>
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;
}
По желанию можно сменить выравнивание, но мне нравится в правом верхнем углу — там он никому не мешается. Гмейл ставит лоадер по середине, но там ведь ничего нет, поэтому и выглядит сносно. Короче, пользуйся и меняй по вкусу.
