Вёрстка Middle Вёрстка на практике обновлено
Спиннер на анимации
Условие
.spinner - круг 24px с вырезом, вращающийся бесконечно, один оборот за секунду. Вращение задаётся только CSS.
Что проверяют тесты
круглая форма
есть вырез в рамке
анимация бесконечная
равномерная скорость
объявлены ключевые кадры
Как подойти
Спиннер целиком на рамке: круглый элемент, одна сторона другого цвета, бесконечное вращение. linear принципиален - при значении по умолчанию ease каждый оборот замедляется к концу и анимация выглядит рваной. transform для вращения выбран не случайно: он не вызывает пересчёт раскладки и выполняется композитором. Что добавить вслух: prefers-reduced-motion для тех, кому анимации противопоказаны.
Подсказки: 3
- Вырез делается разным цветом одной из сторон рамки.
- Ключевые кадры можно описать одним состоянием to.
- linear нужен, иначе вращение будет дёргаться на каждом обороте.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.