x

Добро пожаловать в IT Leader Assistant.
Please Войти!

Создать аккаунт

Пять анимированных лоадеров (спиннеров) на чистом CSS

Александра Шаламова
06-08-2021 10:36
Пять анимированных лоадеров (спиннеров) на чистом CSS

Для тех кому больше нравится видео-формат

В этой статье я покажу пять анимаций лоадеров на чистом CSS для вашего сайта. Все лоадеры идут с исходных кодом, вы можете их легко скопировать и использовать. Про каждое решение я немного расскажу на каких принципах оно было сделано, чтобы была понятна реализация. Поехали!

Лоадер полупрозрачный круг

Первый лоадер, который мы рассмотрим, это такой затухающий хвостик, который бесконечно вращается. Сам хвостик реализован с помощью градиентного фона, с использованием conic-gradient со значением от светло-серого до прозрачного. Серединка градиентного круга закрывается через круг цвета фона, реализованный с помощью псевдоэлемента before, абсолютно позиционированного в середину родителя. У этого решения минус в том, что на цветном или меняющемся фоне оно не сработает, потому что середина не прозрачная (если у вас есть решение с прозрачном кругом в середине элемента, обязательно поделитесь им в комментариях). Затем скругляем это все с помощью свойства border-radius со значением 50%.
Анимация в этом решении достаточно простая, мы используем @keyframes, где с помощью свойства transform со значением rotate задаем две позиции от нуля градусов до 360.

Лоадер блуждающие точки

В этом лоадере мы реализуем три точки, которые двигаются из стороны в сторону друг за другом немного пружиня с краев. Для реализации самих точек мы используем три дочерних div скругленных с помощью border-radius: 50%.
как двигаются точки при анимации
Анимация реализована по следующей логике. Самый правый кружок справа доходит до самого края, отступая на свою ширину от правого края, а слева не доходит до края на расстояние в два своих соседа плюс два отступа между ними. В остальных двух кружках двигаемся справа-налево и сдвигаем каждый кружок все дальше влево. То есть второй кружок будет не доходить до правого края на размер одного кружка и один отступ, и так же до левого края не доходя расстояния в ширину одного кружка и один отступ, находясь таким образом всегда посередине. И по последний третий кружок ведет себя так же как правый, только наоборот, доходя вплотную к левому краю и не доходя до правого на расстояние в два кружка и два отступа. Думаю нагляднее будет то как это работает на схеме, которую я приложила выше.
Чтобы кружки не ездили слишком скучно друг за другом, я реализовала небольшую задержку в анимации для каждого следующего кружка, которая создает ощущение пружинки.
Анимацию также созданием с помощью @keyframes, но уже меняя свойство left каждого кружка по принципу, который я описала выше.

Лоадер с увеличивающимися точками по кругу

Теперь рассмотрим лоадер сложнее. Для него нужно создать восемь дочерних элементов с кружочками и абсолютно позиционировать их в родителе таким образом, чтобы они образовали круг. Здесь придется высчитать позиции для каждого кружочка вручную.
После того как все кружки расположены правильно нужно создать такую анимацию, которая будет увеличивать каждый кружок по очереди и возвращать его в начальный размер, после чего оставлять кружок в покое пока не пройдет полный цикл анимации и все не повторится. Таким образом создается ощущение бегающей по кругу большой точки. Самое сложное в этой анимации это высчитать проценты времени, в которые будет выполняться анимация каждого элемента. Здесь действуем по следующей логике: 100% времени анимации делим на 8 (количество кружков), получаем 12.5%. То есть анимация каждого кружка будет длится 12.5%. При этом кружок будет увеличиваться за 6.25% времени и еще за 6.25% уменьшаться обратно. Теперь для каждого кружка задаем увеличение в его промежутки времени.
как высчитывается отступ кружочка при анимации
calc((var(--largeSize) - var(--size)) / 2))
Чтобы увеличенный кружок визуально оставался на том же месте, а не прыгал вниз, нужно в момент увеличения задать анимацию изменения свойств top и left на величину изначального top или left минус padding, равный размеру большого кружка минус размер маленького деленные на два. В css переменной это значение выглядит так: --padding: calc((var(--largeSize) - var(--size)) / -2)). Минус перед двойкой нужен, потому что мы вычитаем это значение, чтобы проще было использовать дальше. Проще говоря поднимаем кружок влево вверх на разницу его размеров во время увеличения. На картинке выше для наглядности показано, что из себя представляет это значение.

Лоадер с палочками по кругу

Следующий лоадер можно легко сделать на основе предыдущего, нужно лишь повозиться с позиционированием элементов. Для начала заменяем кружочки палочками, поворачиваем их с помощью свойства transform со значение rotate на нужный для каждой угол и подбираем для них позиции так, чтобы они выстроились в ровный круг (результат можно посмотреть в примере).
Анимация реализована по тому же принципу, что и в прошлом лоадере, каждая палочка анимируется 12.5% времени от общей анимации, остальное время остается не измененной. Только в этом примере вместо размера мы меняем палочке цвет. Так чтобы по кругу бегала темная палочка.

Лоадер три увеличивающиеся точки

И последний лоадер, который также основан на базе лоадера с увеличивающимися точками по кругу, это три увеличивающиеся точки. Здесь все будет совсем просто, вместо круга выставляем в ряд три точки и анимируем поочередно их увеличение. Отступы и деление времени анимации сделано также по аналогии с увеличивающимися точками по кругу.

Заключение

Сейчас есть очень много готовых решений для анимированных лоадеров, однако я считаю, что очень полезно рассмотреть подобные реализации с нуля и разобраться в том, как они работают, чтобы легко смочь сделать свое более сложное решение, когда вам это понадобится.
Если у вас есть какие-то вопросы или пожелания вы можете воспользоваться формой для связи с нами:

Комментарии

Чтобы оставить комментарий, пожалуйста, авторизуйтесь

Подписывайтесь на обновления

Последние статьи из нашего блога