В этой статье подробно узнайте про создание элементов в цветной палитре цвета для загрузки, которая производится при помощи CSS. Здесь не нужно подключать скрипты или библиотеки, что работает на чистом CSS. Также эта анимация отлично смотрится на темном или светлом формате сайта или фона. Ведь загрузчик выполнен в нескольких оттенках цвета, что производит красивую анимацию.
Подключаем шрифты:
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
HTML
Код
<div class="agusanulad">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
CSS
Код
.agusanulad span {
width: 15px;
height: 60px;
border-radius: 20px;
margin-left: 2px;
animation-duration: 1500ms;
display: inline-block;
animation-timing-function: cubic-bezier(1.645, 0.045, 0.355, 1.3);
animation-iteration-count: infinite;
}
.agusanulad {
display: block;
overflow: hidden;
margin-bottom: 15%;
font-size: 0;
overflow: visible;
}
.agusanulad span:nth-child(1) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
background-color: #27AAE1;
}
.agusanulad span:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
background-color: #F05A2A;
}
.agusanulad span:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
background-color: #FFCC00;
}
.agusanulad span:nth-child(4) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
background-color: #27AE60;
}
.agusanulad span:nth-child(5) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
background-color: #ae2727;
}
.agusanulad span:nth-child(6) {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
background-color: #6b26b7;
}
.agusanulad span {
-webkit-animation-name: slideBoth;
animation-name: slideBoth;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes slideBoth {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
}
Установка завершена.
Демонстрация
