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

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