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

Подробное описание и демонстрацией работы эффекта загрузки под номером №145 для бибилиотеки 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: 49px;
height: 96px;
margin: 0 auto 70px;
position: relative;
transform-style: preserve-3d;
-webkit-animation:  2.3s loading-2 infinite;
animation: 2.3s loading-2 infinite;
}
.loader .loader-inner{
width: 15px;
height: 10px;
background: #392f5a;
position: absolute;
top: 50%;
left: 50%;
-webkit-animation:  loading-1 3.45s infinite cubic-bezier(0.53, 0.68, 0.53, 0.41);
animation: loading-1 3.45s infinite cubic-bezier(0.53, 0.68, 0.53, 0.41);
}
.loader .loader-inner:nth-of-type(2){
margin-top: 12px;
animation-delay: 0.12s;
}
.loader .loader-inner:nth-of-type(3){
margin-top: 23px;
animation-delay: 0.23s;
}
.loader .loader-inner:nth-of-type(4){
margin-top: 35px;
animation-delay: 0.35s;
}
.loader .loader-inner:nth-of-type(5){
margin-top: 47px;
animation-delay: 0.46s;
}
@-webkit-keyframes loading-1{
0%, 100%{
-webkit-transform: translateX(-24px) scaleX(0.5);
background: #392f5a;
}
25%{
-webkit-transform: translateX(0px) scaleY(1) scaleX(5) rotateY(180deg);
background: #20a39e;
}
50%{
-webkit-transform: translateX(24px) scaleX(0.5);
background: #392f5a;
}
75%{
-webkit-transform: translateX(0px) scaleY(1) scaleX(5) rotateY(180deg);
background: #20a39e;
}
}
@keyframes loading-1{
0%, 100%{
transform: translateX(-24px) scaleX(0.5);
background: #392f5a;
}
25%{
transform: translateX(0px) scaleY(1) scaleX(5) rotateY(180deg);
background: #20a39e;
}
50%{
transform: translateX(24px) scaleX(0.5);
background: #392f5a;
}
75%{
transform: translateX(0px) scaleY(1) scaleX(5) rotateY(180deg);
background: #20a39e;
}
}
@-webkit-keyframes loading-2{
0%,100%{
-webkit-transform: rotateY(0deg);
}
50%{
-webkit-transform: rotateY(360deg);
}
}
@keyframes loading-2{
0%,100%{
transform: rotateY(0deg);
}
50%{
transform: rotateY(360deg);
}
}

Теги: