Как добавить ajax preloader

С Yii вы можете очень просто создавать ajax запросы. В большинстве случаев во время выполнения запроса, для наглядности, стоит показать картинку о том что он еще обрабатывается.

В этом уроке мы разберем простой пример вывода preloader картинки с помощью Yii + jQuery. Для всех данных внутри элемента который мы пытаемся обновить - мы установим прозрачность в 80% и отобразим картинку загрузки.

Достоинством этого решения является то, что вы не должны будите добавлять дополнительную разметку на ваши страницы.

При выполнении ajax запроса, добавляется .loading class для div элемента над которым мы работаем. После завершения запроса - класс автоматически будет снят с элемента. Это означает что вам не надо будет вручную удалять preloader и тп.

array(
     'ajax' => array(
          'beforeSend' => 'function(){
                      $("#myDiv").addClass("loading");
                  }',
          'complete' => 'function(){
                      $("#myDiv").removeClass("loading");
                  }',
          )
 )

Это добавляем в ваш общий CSS файл:

div.loading {
 background-color: #eee;
 background-image: url('loading.gif');
 background-position: center center;
 background-repeat: no-repeat;
 opacity: 1;
}
div.loading * {
 opacity: .8;
}

• Оригинал "How to add ajax-loading indicators" [англ.]