139 views

Индикатор загрузки JS

Для того чтобы отобразить на форме или блоке индикатор загрузки можно воспользоватся конструкцией

/**
 * Приложение
 */
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;
}
This site is using the Seo Wizard wordpress plugin by www.seowizard.org.