Как сделать индикатор загрузки
Короткий ответ
Круг с одной цветной стороной рамки, который бесконечно вращается:
<style>
@keyframes spin { to { rotate: 1turn; } }
.spinner { width: 40px; height: 40px; border: 4px solid gainsboro; border-top-color: royalblue; border-radius: 50%; animation: spin 0.8s linear infinite; }
</style>
<div class="spinner" role="status" aria-label="Loading"></div>linear даёт равномерную скорость без рывков, infinite повторяет анимацию бесконечно.
Три точки
Другой популярный вариант — точки, которые подпрыгивают по очереди. Одна анимация с разной задержкой:
<style>
@keyframes bounce { 50% { translate: 0 -8px; opacity: 0.4; } }
.dots { display: flex; gap: 6px; padding: 16px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: seagreen; animation: bounce 0.9s infinite; }
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }
</style>
<div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>Доступность
role="status" и aria-label сообщают экранному диктору, что идёт загрузка, — иначе он вообще не узнает о крутящемся круге.
Частая ошибка
Анимация дёргается, если вращать элемент через изменение width, margin или фона. Анимируйте только rotate, transform и opacity. И не забывайте убирать индикатор после загрузки — бесконечная анимация на скрытом через opacity элементе продолжает тратить ресурсы.
Функции из этого ответа
- animation — Запускает на элементе анимацию из `@keyframes`.
- @keyframes — Описывает шаги анимации, которую затем запускают свойством `animation`.
- border-radius — Скругляет углы элемента.
- transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.