Подробное описание и демонстрацией работы эффекта загрузки под номером №144 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 144
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <span></span> <span></span> <span></span> </div> <div class="box box-1"> <div class="box-inner"></div> </div> <div class="box box-2"> <div class="box-inner"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #e5ebc4; }
.loader{
width: 100px;
height: 100px;
margin: 50px auto;
text-align: center;
}
.loader .loader-inner{
width: 100px;
height: 25px;
position: relative;
opacity: 0;
animation: 2s loading-3 infinite linear 2s;
}
.loader .loader-inner span{
display: block;
width: 6px;
height: 15px;
background: #fff;
position: absolute;
box-shadow: 0 0 1px #fff;
transform-origin: bottom;
}
.loader .loader-inner span:nth-child(1){
bottom: 5px;
left: 36px;
transform: rotate(-35deg);
}
.loader .loader-inner span:nth-child(2){
bottom: 8px;
left: 44px;
}
.loader .loader-inner span:nth-child(3){
bottom: 5px;
left: 52px;
transform: rotate(35deg);
}
.loader .box{
height: 36px;
position: relative;
}
.loader .box:after{
content: "";
width: 20px;
height: 5px;
background: #fff;
box-shadow: 0 0 1px #fff;
position: absolute;
top: 47px;
left: 5px;
}
.loader .box-inner{
width: 30px;
height: 36px;
background: #fff;
border-radius: 0 0 36px 36px;
box-shadow: 0 0 1px #fff;
}
.loader .box-inner:before{
content: "";
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(transparent 50%, #f5b221 50%);
position: absolute;
left: 4px;
bottom: 4px;
}
.loader .box-inner:after{
content: "";
width: 6px;
height: 13px;
background: #fff;
box-shadow: 0 0 1px #fff;
position: absolute;
top: 35px;
left: 12px;
}
.loader .box-1{
display: inline-block;
margin-right: 10px;
animation: loading-1 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
.loader .box-2{
display: inline-block;
animation: loading-2 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
.loader .box-1 .box-inner:before{
animation: loading-2 2s linear infinite;
}
.loader .box-2 .box-inner:before{
animation: loading-1 2s linear infinite;
}
@keyframes loading-1{
0%{ transform: rotate(0deg); }
50%{ transform:rotate(22deg); }
}
@keyframes loading-2{
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-22deg); }
}
@keyframes loading-3{
0%{
opacity: 0;
transform: scaleY(1);
}
33%{
opacity: 1;
transform: scaleY(1.4);
}
64%{
opacity: .1;
transform: scaleY(1);
}
100%{
opacity: 0;
transform: scaleY(.3);
}
}