Вращающийся лоадер
В этой демонстрации разберём, как создать лоадер.
Лоадер будет состоять из двенадцати «лепестков», которые выстроены вокруг центральной точки.
Добавим разметку.
Создадим правило для элемента с классом .loader и определим размеры лоадера.
Для рисования лепестков используем псевдоэлемент ::after. Определим размеры. Немного скруглим углы. Добавим position: absolute. А для элемента .loader добавим position: relative.
Поворачивать лепестки будем за счёт трансформации rotate. С помощью CSS-свойства transform-origin зададим для элемента .loader__stick определим точку вращения, чтобы оно происходило вокруг центра лоадера. Сразу добавим нулевой угол поворота для первого лепестка.
Каждый последующий лепесток будет поворачиваться на 30 градусов (360 / 12 = 30). Так для второго лепестка — transform: rotate(30deg). Для третьего — transform: rotate(60deg).
Добавим поворот для остальных лепестков.
Создадим анимацию spinner, которая будет менять прозрачность.
Добавим анимацию spinner для элемента с классом .loader__stick. Время установим равным 1.2s. Повторять анимацию будем бесконечно.
Так мы имитируем исчезновение лепестков.
Сейчас лепестки исчезают и появляются одновременно. Заставим их делать это последовательно. Для этого зададим каждому элементу задержку анимации с разницей в 0.1 секунды (элементов 12, а вся анимация длится 1.2 секунды).
Сначала зададим animation-delay со значением 0s последнему лепестку, затем animation-delay со значением -0.1s предпоследнему.
Аналогично добавим animation-delay для остальных лепестков.
Теперь избавимся от батареи правил loader__stick:nth-child. Добавим в разметку каждого элемента атрибут style с переменной --i.
Зададим трансформацию поворота через формулу calc(30deg * var(--i)). То есть каждый элемент поворачивается на дополнительные 30 градусов.
Свойства transform: rotate(x) в отдельных правилах удалим. Ничего не сломалось.
Зададим задержку анимации с помощью формулы calc(var(--i) * 0.1s - 1.2s). То есть задержка каждого элемента изменяется на 0.1 относительно предыдущего. От -1.1s у первого элемента, до 0s у последнего.
Можно удалить оставшуюся батарею с :nth-child. Ничего не сломалось.
Лоадер готов.
