В этой статье мы разберём как сделать spinner loader на чистом CSS, или спиннер загрузки если на русском, эта статья будет не очень большая, но интересная.
Также можете почитать статью «Как делать фигуры на CSS», тоже очень интересная статья, для тех кто хочет больше узнать о CSS.
Как сделать spinner loader на CSS:
Первое что нам нужно сделать, так это не большой HTML контейнер, который по сути у нас и будет самим спиннерем, но вы это всё ещё увидите.
Вот контейнер:
1 | <div class="spinner"></div> |
Теперь когда сделали контейнер, перейдём к CSS, и суть в том, что мы сделаем в блок равный по ширине и высоте, добавим три рамки с трёх сторон и закруглим их, чтобы получился круг, ну анимируем это всё с помощью @kayframes.
Вот что мы пишем в CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .spinner { height: 50px; width: 50px; border-left: 3px solid greenyellow; border-bottom: 3px solid greenyellow; border-right: 3px solid greenyellow; border-top: 3px solid transparent; border-radius: 50%; animation: spinner 1s linear infinite; } @keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
В начале мы задаём высоту и ширину нашего контейнера, они абсолютно одинаковы и равны 50 пикселей, следующие задаём рамки со всех сторон в ручную, размер каждой рамки равен 3 пикселя и тип сплошной, но цвет задаём только для трёх, четвёртой задаём в качестве цвета прозрачный.
Дальше задаём анимацию через стиль animation, тут всё просто, сначала у нас название для анимации, оно будет использоваться при объявление @keyframes, время анимации, тип анимации, или то как она будет проигрываться, в нашем случае линейно, и задаём количество проигрываний, у нас это бесконечно, вам тоже рекомендую, так как не понятно, как долго вам надо будет проигрывать анимацию.
Последние создаём саму анимации, это совсем просто, объявляем @keyframes справа от него даём название анимации, мы его назначали выше в свойстве animation, ну и в качестве анимации используем трансформацию, а точнее по градусам, начальная позиция это соответственно 0 градусов или 0deg, конечная 360 или 360deg.
Вот что у нас получилось:
Как видите получилось не плохо, тут конечно просто картинка, но вы можете попробовать этот код, и убедиться сами что всё работает так как надо.
Вывод:
Тут вы узнали как создать spinner loader на чистом CSS или просто спиннер загрузки, надеюсь для вас это было полезно и познавательно, также если вам что то не понятно по поводу анимации, то почитайте статью по ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...