Вашему вниманию Loader на чистом CSS, который по своей анимации похоже на блесна, что видим, как они выглядят воде. А точнее это красиво выполнен загрузчик страниц на сайте, что аналогично имеет несколько оттенков цвета загрузчик и безусловно стильно красивую анимацию.
Обратите внимание, что здесь загрузочные элементы анимированы с помощью CSS3, поэтому они должны хорошо работать в современных браузерах, которые поддерживают свойства CSS3, такие как переходы, а также @keyframes с анимацией.
HTML
Код
<div class="kainvolutes">
<span class="ladekun-vazveka"></span>
<span class="ladekun-vazveka"></span>
<span class="ladekun-vazveka"></span>
<span class="ladekun-vazveka"></span>
</div>
CSS
Код
.ladekun-vazveka {
display: inline-block;
width: 20px;
height: 60px;
margin: 0 2px;
box-shadow: 0 0 10px #000;
animation: loading-icon 10s ease-in-out infinite;
animation-delay: 5s;
}
@keyframes loading-icon {
0% {
transform: scale(1) rotate(0deg);
}
10% {
transform: scale(1) rotate(360deg);
}
20% {
transform: scale(1) rotate(180deg);
}
30% {
transform: scale(2, 1.5) skewY(40deg) rotate(180deg);
}
40% {
transform: scale(1) rotate(360deg);
border-radius: 0;
}
50% {
transform: scale(2, 2) skewY(40deg) rotate(0deg);
border-radius: 0 50%;
}
60% {
transform: scale(2, 2.5) skewY(40deg) rotate(360deg);
}
70% {
transform: scale(2, 1.5) skewY(40deg) rotate(0deg);
}
80% {
transform: scale(1) rotate(0deg);
border-radius: 0;
}
100% {
transform: scale(1) rotate(0deg);
}
}
.ladekun-vazveka:nth-child(1) {
background-color: #27AAE1;
animation-delay: 0s;
}
.ladekun-vazveka:nth-child(2) {
background-color: #F05A2A;
animation-delay: 0.1s;
}
.ladekun-vazveka:nth-child(3) {
background-color: #FFCC00;
animation-delay: 0.2s;
}
.ladekun-vazveka:nth-child(4) {
background-color: #27AE60;
animation-delay: 0.3s;
}
.kainvolutes {
background-color: #000000;
z-index: 20;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
@keyframes kainvolutes {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
Рекомендую посмотреть демонстрацию.
Демонстрация
