Для того чтобы отобразить на форме или блоке индикатор загрузки можно воспользоватся конструкцией
/**
* Приложение
*/
var application = new function()
{};
/**
* Индикатор загрузки
*/
application.loading = new function()
{
/**
* Последний объект, на котором отображался индикатор загрузки
*
* @var string|object
*/
var lastObject = '';
/**
* Отображает индикатор загрузки
*
* @param string|object selector Селектор элемента, у которого отображается индикатор
* @return void
*/
this.show = function(selector)
{
lastObject = selector = selector || 'body';
$(selector)
.addClass('loading-indicator')
.append('<div class="loading-layer"></div><div class="loading-icon"></div>');
};
/**
* Скрывает индикатор загрузки
*
* @param string|object selector Селектор элемента, у которого отображается индикатор
* @return void
*/
this.hide = function(selector)
{
selector = selector || lastObject;
$(selector)
.removeClass('loading-indicator')
.find('> .loading-layer, > .loading-icon').remove();
};
};
CSS для него:
/* Loading indicator */
.loading-indicator
{
position: relative;
}
.loading-indicator .loading-layer,
.loading-indicator .loading-icon
{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}
.loading-indicator .loading-layer
{
background-color: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
.loading-indicator .loading-icon
{
background: url('images/loading.gif') no-repeat center center transparent;
}
