Безусловно, что для современный высокоскоростного интернет соединение стало больше различных элементов задействовано. Если ранее мы могли поставить загрузчик или loader, то здесь он бы работал, но занимал очень много времени, и уже через какое то время он надоедал. А теперь все происходит мгновенно, если брать наши дни, то загрузка интернет сайта доли секунды.
А если происходит так, что все занимает более 4 секунд, то здесь больше всего не кто не будет ждать а закроет. И вот по этой части можно поставить что то, чтоб вас развлекло, и это будет красивая анимация загрузчика.
HTML
Код
<div class="kamudkol-vacugnes">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
Код
@keyframes loader {
0% {transform:rotate(-45deg)}
50%{transform:rotate(-135deg)}
100%{transform:rotate(-225deg)}}
@keyframes span-1 {
0% {transform:translate(0);}
50%{transform:translate(-50px, 0);border-color:#da3651}
100%{transform:translate(0);}}
@keyframes span-2 {
0%{transform:translate(0);}
50%{transform:translate(50px, 0);border-color:#865075}
100%{transform:translate(0);}}
@keyframes span-3 {
0%{transform:translate(0);}
50%{transform:translate(0, -50px);border-color:#e48d0b}
100%{transform:translate(0);}}
@keyframes span-4 {
0%{transform:translate(0);}
50%{transform:translate(0, 50px);border-color:#0bcddc}
100%{transform:translate(0);}}
.kamudkol-vacugnes {
width: 48px;
height: 48px;
position: relative;
animation: loader 2s infinite ease-in-out;
}
.kamudkol-vacugnes span {
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 0;
border: 4px solid #081948;
}
.kamudkol-vacugnes span:nth-child(1) {
animation: span-1 2s ease-in-out infinite;
}
.kamudkol-vacugnes span:nth-child(2) {
animation: span-2 2s ease-in-out infinite;
}
.kamudkol-vacugnes span:nth-child(3) {
animation: span-3 2s ease-in-out infinite;
}
.kamudkol-vacugnes span:nth-child(4) {
animation: span-4 2s ease-in-out infinite;
}
Вероятно это самый простой по своей конструкций загрузчик.
Демонстрация
