Индикатор загрузки на базе CSS анимации

2021-10-23

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

Создадим div элемент с классом spinner <div class="spinner"></div> и применим к нему следующие стили:

.spinner {
    margin: 1em auto;
    width: 40px;
    height: 40px;
    border-radius: 40px; /* Сделаем элемент круглым */
    border: solid 5px #ddd;
    border-left: solid 5px #999; /* Одна из границ должна отличаться по цвету */
}

В результате получим элемент следующего вида:

Теперь необходимо добавить вращение с помошью правила transform: rotate

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner {
    /* ... предыдущие стили */
    animation-name: spin; /* Применяем анимацию вращения */
    animation-duration: 1s; /* Период вращения */
    animation-iteration-count: infinite; /* Если не указать, то сделает только одно вращение */
    animation-timing-function: linear; /* Для того, чтобы вращение было равномерным */
}

Если добавить эти стили, то получим следующий результат: