Подробное описание и демонстрацией работы эффекта загрузки под номером №186 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 186
<div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 220px;
height: 200px;
margin: 0 auto;
}
.loader .loader-inner{
width: 160px;
height: 100px;
border-radius: 5px;
background: #2e2f26;
margin: -50px 0 0 -80px;
position: absolute;
top: 50%;
left: 50%;
transform-type: preserve-3d;
animation: loading-1 3s cubic-bezier(0.55, 0.3, 0.24, 0.99) infinite;
}
.loader .loader-inner:nth-child(2){
width: 150px;
height: 90px;
border-radius: 3px;
background: #ee6400;
margin: -45px 0 0 -75px;
z-index: 1;
animation-name: loading-2;
}
.loader .loader-inner:nth-child(3){
width: 40px;
height: 20px;
border-radius: 0 0 5px 5px;
background: #ebcc08;
margin: 50px 0 0 -20px;
z-index: 2;
animation-name: loading-3;
}
@keyframes loading-1{
3%,
97%{
width: 160px;
height: 100px;
margin-top: -50px;
margin-left: -80px;
}
30%,
36%{
width: 80px;
height: 120px;
margin-top: -60px;
margin-left: -40px;
}
63%,
69%{
width: 40px;
height: 80px;
margin-top: -40px;
margin-left: -20px;
}
}
@keyframes loading-2{
3%,
97%{
width: 150px;
height: 90px;
margin-top: -45px;
margin-left: -75px;
}
30%,
36%{
width: 70px;
height: 96px;
margin-top: -48px;
margin-left: -35px;
}
63%,
69%{
width: 32px;
height: 60px;
margin-top: -30px;
margin-left: -16px;
}
}
@keyframes loading-3{
3%,
97%{
width: 40px;
height: 20px;
margin-top: 50px;
margin-left: -20px;
}
30%,
36%{
width: 8px;
height: 8px;
margin-top: 49px;
margin-left: -5px;
border-radius: 8px;
}
63%,
69%{
width: 16px;
height: 4px;
margin-top: -37px;
margin-left: -8px;
border-radius: 10px;
}
}