Для того чтобы отобразить на форме или блоке индикатор загрузки можно воспользоватся конструкцией
/** * Приложение */ 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; }