Preloader для сайта — стиль 174

Подробное описание и демонстрацией работы эффекта загрузки под номером №174 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки тсраницы

<div class="demo">
<div class="loader">
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
</div>
</div>

css разметка для реализации эффекта загрузки тсраницы

.demo{ background: #c80030; }
.loader{
width: 150px;
height: 150px;
border-radius: 50%;
margin: 50px auto;
position: relative;
animation: loading-1 20s infinite linear;
}
.loader .loader-inner{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader .loader-inner:after{
content: "";
width: 20px;
height: 20px;
border: 1px solid #ffed03;
position: absolute;
left: 20px;
top: 20px;
animation: loading-2 2s infinite;
}
.loader .loader-inner:nth-child(1){ transform: rotate(0deg); }
.loader .loader-inner:nth-child(1):after{ animation-delay: -0.5s; }
.loader .loader-inner:nth-child(2){ transform: rotate(45deg); }
.loader .loader-inner:nth-child(2):after{ animation-delay: -1s; }
.loader .loader-inner:nth-child(3){ transform: rotate(90deg); }
.loader .loader-inner:nth-child(3):after{ animation-delay: -1.5s; }
.loader .loader-inner:nth-child(4){ transform: rotate(135deg); }
.loader .loader-inner:nth-child(4):after{ animation-delay: -2s; }
.loader .loader-inner:nth-child(5){ transform: rotate(180deg); }
.loader .loader-inner:nth-child(5):after{ animation-delay: -2.5s; }
.loader .loader-inner:nth-child(6){ transform: rotate(225deg); }
.loader .loader-inner:nth-child(6):after{ animation-delay: -3s; }
.loader .loader-inner:nth-child(7){ transform: rotate(270deg); }
.loader .loader-inner:nth-child(7):after{ animation-delay: -3.5s; }
.loader .loader-inner:nth-child(8){ transform: rotate(315deg); }
.loader .loader-inner:nth-child(8):after{ animation-delay: -4; }
@keyframes loading-1{
100%{ transform: rotate(-360deg); }
}
@keyframes loading-2{
50%{
border-radius: 50%;
transform: scale(0.4,0.4) rotate(-90deg);
}
}

Теги: