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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div id="loading1" class="loader-inner">
<div class="box"></div>
</div>
<div id="loading2" class="loader-inner">
<div class="box"></div>
</div>
<div id="loading3" class="loader-inner">
<div class="box"></div>
</div>
<p class="text">LOADING...</p>
</div>
</div>
</div>
</div>

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

.loader{
width: 70px;
height: 70px;
margin: 50px auto;
position: relative;
}
.loader-inner{
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
#loading1{
width: 53px;
height: 20px;
left: 20px;
transform: skew(-15deg, 0);
z-index: 1;
}
#loading2{
width: 33px;
height: 20px;
left: 20px;
top: 15px;
transform: skew(-15deg, 40deg)
}
#loading3{
width: 53px;
height: 20px;
top: 30px;
transform: skew(-15deg, 0)
}
.box{
background: #daa520;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px,0,0);
backface-visibility: hidden;
}
#loading1 .box{
animation: loading1 1.3s ease-in infinite  0s backwards;
}
#loading2 .box{
transform: translate3d(0px,0,0);
background: #a3873e;
animation: loading2 1.3s linear infinite  0.3s  backwards;
}
#loading3 .box{
animation : loading3 1.3s ease-out infinite  0.7s backwards;
}
.text{
font-size: 11px;
font-style: italic;
color: #daa520;
position:absolute;
left: -3px;
top: 55px;
font-family:Arial;
text-align:center;
}
@-webkit-keyframes loading1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@keyframes loading1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@-webkit-keyframes loading2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@keyframes loading2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@-webkit-keyframes loading3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
@keyframes loading3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}

Теги: