Индикатор загрузки на базе 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; /* Для того, чтобы вращение было равномерным */
}

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