Кастомизируемый лоадер
В предыдущей части мы научились создавать простой вращающийся лоадер. Благодаря CSS-переменным мы существенно сократили код.
Однако, CSS-переменные можно использовать не только для сокращения кода, но и для настройки внешнего вида компонентов. В этой демонстрации мы превратим обычный лоадер в полностью кастомизируемый лоадер.
Определимся, что будем настраивать:
- цвет лепестков;
- размеры лепестков;
- размеры лоадера;
- время анимации.
Начнём с цвета лепестков. Создадим в :root CSS-переменную --background-color, в которой будем определять цвет. Добавим в неё значение #ffffff — наш исходный цвет.
Поменяем белый цвет на жёлтый.
Создадим переменные для настройки размеров лепестка и заменим значениями этих переменных статичные значения в .loader__stick::after.
Поменяем размеры лепестка. Пока всё идёт по плану.
Перейдём к размерам самого лоадера. Для размеров используем одну CSS-переменную --size, наш лоадер квадратный.
При изменении значения --size лоадер должен оставаться по центру, а круг с лепестками должен расширяться или сужаться.
Для этого нужно менять координаты лепестков и центр трансформации, которые зависят от размеров лоадера. Доработаем это на следующих шагах.
Поставим анимацию на паузу и займёмся расположением лепестков.
Точка, относительно которой выполняется трансформация, находится в центре лоадера, когда размеры для обоих координат transform-origin равны половине размера самого лоадера.
То есть задаём calc(var(--size) / 2) для каждой координаты.
Координата top равна половине ширины лепестка.
Координата left равна половине разности размера лоадера и ширины лепестка.
Снова заводим анимацию. Меняем значение --size. Всё масштабируется как надо.
Добавим переменную --animation-time. И заменим значение 1.2s в CSS-свойстве animation на эту переменную.
Поменяем значение --animation-time на 2.2s. Анимация сломалась. Лепестки появляются без учёта нового значения переменной.
Аналогичная ситуация произойдёт, если уменьшить значение --animation-time. Попробуйте установить, например, 0.2s и посмотреть, что происходит.
Сделаем так, чтобы формула в свойстве animation-delay учитывала длительность анимации.
Мы получили смещение 0.1s поделив 1.2s на 12. Заменим 0.1s на --animation-time делённую на 12.
Осталось заменить статичное значение 1.2s, которое мы вычитаем в конце формулы, на переменную --animation-time. Анимация завершена.
Изменим значение длительности анимации и убедимся, что лоадер работает правильно. Можете поэкспериментировать с другими значениями, например, 0.5s.
На финальном шаге выведем на страницу 4 разных лоадера, значения для которых настроим через CSS-переменные.
