Индикатор выполнения AJAX запроса (jQuery)

Как говорится "Краткость - сестра таланта", я конечно не брат краткости и вообще, ее родственником не являюсь, но буду краток! Сразу к делу.

Допустим, у нас есть код обработки формы (форма #form), в которую вводим, какие то данные, жмем кнопку и через ajax выводим результат на экран (блок #display):

    $.ajax({ 
        url: 'ajax.php',
        type: 'POST',
        data: $('#form').serialize(),  
        success: function(data) {
            $('#display').html(data);        
        }
    });

Стоит задача - имитировать процесс выполнения обработки данных. В качестве индикатора можно использовать картинку анимацию (формат .gif). Анимированная картинка должна появится сразу после нажатия кнопки и исчезнуть перед тем, как будет выведен результат.

Приступаем, создаем класс, задаем размеры картинки и прописываем полный путь до нее:

.processing {
    width: 25px;
    height: 10px;
    background: url("loading.gif");
}

Теперь в ajax запрос добавляем две функции: addClass() и removeClass(), первая функция подключить наш класс к блоку вывода результата, вторая отключит, перед самым выводом результата:

    $('#display').addClass('processing'); // Подключаем класс
    $.ajax({ 
        url: 'ajax.php',
        type: 'POST',
        data: $('#urlform').serialize(),  
        success: function(data) {
            $('#display').removeClass('processing'); // Отключаем класс        
            $('#display').html(data);            
        }
    });

По коду видно, что ajx запрос начнет выполнятся после того, как картинка будет подключена и отключится она перед тем как появится результат.

Картинка имитирующая процесс обработки будет появляться в том блоке, где отобразится результат, если вам нужно сделать имитацию совершенно в другом месте, сделайте для нее отдельный блок:

<div id="indicator"></div>

и измените id блока в функциях addClass() и removeClass():

$('#indicator').addClass('processing');    // Подключаем класс
$('#indicator').removeClass('processing'); // Отключаем класс

Надеюсь информация была полезной.
Спасибо за внимание.