Индикатор загрузки на базе CSS анимации
23 окт 2021
Для правильной работы индикатора браузер клиента должен поддерживать 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; /* Для того, чтобы вращение было равномерным */
}
Если добавить эти стили, то получим следующий результат: