Подробное описание и демонстрацией работы эффекта загрузки под номером №142 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 142
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> </div> <div class="loader-inner loader-inner-2"> <div class="box box-2"></div> </div> <div class="loader-inner loader-inner-3"> <div class="box box-3"></div> </div> <div class="loader-inner loader-inner-4"> <div class="box box-4"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 146px;
height: 49px;
margin: 70px auto;
position: relative;
-webkit-animation: loading-4 1.15s 1;
animation: loading-4 1.15s 1;
animation-fill-mode: forwards;
}
.loader .loader-inner{
position: absolute;
-webkit-animation: loading-1 1150ms infinite ease-in-out alternate, loading-3 2300ms infinite ease-in-out;
animation: loading-1 1150ms infinite ease-in-out alternate, loading-3 2300ms infinite ease-in-out;
}
.loader .box{
width: 49px;
height: 49px;
border-radius: 50%;
background: #5fad56;
box-shadow: 0 -6.25px 0 rgba(0,0,0,0.15) inset;
border: 2px solid #000;
transform: scale(0.5);
-webkit-animation: loading-2 1150ms infinite ease-in-out alternate;
animation: loading-2 1150ms infinite ease-in-out alternate;
animation-delay: -575ms;
}
.loader .box:after{
content: "";
width: 49px;
height: 13px;
border-radius: 50%;
background: rgb(238,238,238);
position: absolute;
top: 68px;
}
.loader .loader-inner-2{ animation-delay: -1150ms; }
.loader .loader-inner-3{ animation-delay: -1725ms; }
.loader .loader-inner-4{ animation-delay: -2875ms; }
.loader .box-2{
background: #f95b34;
animation-delay: -1725ms;
}
.loader .box-3{
background: #e8d324;
animation-delay: -2300ms;
}
.loader .box-4{
background: #ff4b7d;
animation-delay: -3450ms;
}
@-webkit-keyframes loading-1{
100%{ -webkit-transform: translateX(97px); }
}
@keyframes loading-1{
100%{ transform: translateX(97px); }
}
@-webkit-keyframes loading-2{
100%{ -webkit-transform: scale(1); }
}
@keyframes loading-2{
100%{ transform: scale(1); }
}
@-webkit-keyframes loading-3{
25%{ z-index: 1; }
75%{ z-index: -1; }
}
@keyframes loading-3{
25%{ z-index: 1; }
75%{ z-index: -1; }
}
@-webkit-keyframes loading-4{
100%{ opacity: 1; }
}
@keyframes loading-4{
100%{ opacity: 1; }
}