Анимации загрузки — это визуальные индикаторы, которые показывают пользователю, что система обрабатывает действие. Один из самых распространённых вариантов — спиннер, вращающийся круг.
Это статья из цикла заметок по CSS анимации и эффектам.
Как это работает
Мы создадим круг, который будет постоянно вращаться. Всё делается с помощью чистого CSS: один HTML-элемент и анимация на transform: rotate(...).
Пример, того как это выглядит:
Вот пример на чистом CSS / HTML
|
1 |
<div class="spinner"></div> |
Стили
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.spinner { width: 40px; height: 40px; border: 4px solid #ccc; /* светлая граница */ border-top: 4px solid #333; /* тёмная часть, создающая эффект вращения */ border-radius: 50%; animation: css-animation-spin 1s linear infinite; /* бесконечное вращение */ margin: 20px auto; /* выравнивание по центру */ } @keyframes css-animation-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
Объяснение
border: создаём кольцо с одной тёмной частью, которая будет «вести» при вращении.@keyframes spin: задаёт вращение от 0 до 360 градусов.animation: делает вращение непрерывным (infinite) и равномерным (linear).
Как использовать
Такой спиннер можно показывать в следующих случаях:
- пока загружается страница;
- при отправке формы;
- при подгрузке данных из API.
Расширение идеи
- Добавить fade-in/fade-out при появлении и скрытии.
- Заменить
borderнаconic-gradientдля более плавного вида (поддержка ограничена). - Изменять скорость вращения при наведении или клике.