Делаем красивый индикатор загрузки для ajax-запросов

Как правило, ajax-запросы проходят достаточно быстро и пользователь этог оне замечает. Но если запрос занимает несколько секунд - стоит показать пользователю, что сайт работает, ничего не зависло и запрос на самом деле ещё идёт.
Для этого, сразу же после отправки запроса покажем крутящийся индикатор загрузки, а после окончания запроса спрячем его.
Используем для этого прекрасный набор спиннеров https://github.com/webkul/csspin
Ну и сам скрипт.

Html разметка

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax spinner</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="csspin.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>  
    <div class="block">
        <div class="cp-spinner"></div>
    </div>
    <button id="test-ajax">Test</button>
    <div id="content"></div>
</body>
</html>

Файлы csspin.css и style.css скачивайте с гитхаба, ссылка чуть выше.
В контейнере с классом cp-spinner будет сам индикатор загрузки. В диве с id content будет результат запроса, а на кнопку мы повесим выполнение ajax-запроса.

JavaScript код

Весь код я приведу целиком, он небольшой. Вы можете положить его в отдельный файл и подключить после jQuery или даже разместить в body между тэгами <script></script>

$(document).ready(function() {
    $('#test-ajax').on( "click", function() {
        //Говорим, что контент ещё загружается
        $("#content").html('Loading...');
        //блокируем кнопку от повторного нажатия
        $(this).attr('disabled', 'disabled');

        //выбираем класс случайным образом
        var classes = ['cp-round', 'cp-pinwheel', 'cp-balls', 'cp-bubble', 'cp-flip', 'cp-hue', 'cp-skeleton', 'cp-eclipse', 'cp-boxes', 'cp-morph', 'cp-heart', 'cp-meter'];
        var rand = 0.5 + Math.random() * (classes.length)
        rand = Math.round(rand) - 1;
        var spinner_class = classes[rand]

        //добавляем класс спиннера
        $(".cp-spinner").addClass(spinner_class);

        //делаем ajax-запрос
        $.ajax({
            url: "test_ajax.php",
            success: function(result){
                //выводим результат запроса
                $("#content").html(result);
                //прячем спиннер
                $(".cp-spinner").removeClass(spinner_class);
                //разблокируем кнопку
                $("#test-ajax").removeAttr('disabled');
            }
        });
    });
});

CSS код

Тут совсем просто, просто чтобы всё было по-центру

.block {
    margin: 0 auto;
    width: 200px;
}
body{
    text-align: center;
}

Листинг test_ajax.php

Для тестирования нам нужен "долгий" скрипт. Делается он легко:

<?php
sleep(rand(1,3));
echo 'ok';

Смотрим:

Материал подготовлен автором @tristamoff

146