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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<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>
</div>
</div>
</div>

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

.loader{
width: 150px;
height: 150px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner{
width: 100%;
height: 100%;
border-radius: 146px;
border: 2px solid rgba(105,28,0,0.8);
opacity: 0;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-animation: loading-1 34.5s ease-in-out alternate infinite;
animation: loading-1 34.5s ease-in-out alternate infinite;
}
.loader .loader-inner:nth-of-type(1){
-webkit-animation-delay: 575ms;
animation-delay: 575ms;
}
.loader .loader-inner:nth-of-type(2){
-webkit-animation-delay: 1150ms;
animation-delay: 1150ms;
}
.loader .loader-inner:nth-of-type(3){
-webkit-animation-delay: 1725ms;
animation-delay: 1725ms;
}
.loader .loader-inner:nth-of-type(4){
-webkit-animation-delay: 2300ms;
animation-delay: 2300ms;
}
.loader .loader-inner:nth-of-type(5){
-webkit-animation-delay: 2875ms;
animation-delay: 2875ms;
}
@-webkit-keyframes loading-1{
0%{
-webkit-transform: rotateY(0deg) rotateX(0deg);
opacity: 1;
}
25%{
-webkit-transform: rotateY(180deg) rotateX(360deg);
}
50%{
-webkit-transform: rotateY(540deg) rotateX(540deg);
}
75%{
-webkit-transform: rotateY(720deg) rotateX(900deg);
}
100%{
-webkit-transform: rotateY(900deg) rotateX(1080deg);
opacity: 1;
}
}
@keyframes loading-1{
0%{
transform: rotateY(0deg) rotateX(0deg);
opacity: 1;
}
25%{
transform: rotateY(180deg) rotateX(360deg);
}
50%{
transform: rotateY(540deg) rotateX(540deg);
}
75%{
transform: rotateY(720deg) rotateX(900deg);
}
100%{
transform: rotateY(900deg) rotateX(1080deg);
opacity: 1;
}
}

Теги: