Подробное описание и демонстрацией работы эффекта загрузки под номером №17 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 17
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader {
position: relative;
width: 65px;
border: 1px solid transparent;
margin: 40px auto;
}
.loader span {
position: absolute;
bottom: 0;
display: block;
width: 9px;
height: 5px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.1);
-webkit-animation: preloader 2s infinite ease-in-out;
animation: preloader 2s infinite ease-in-out;
}
.loader span:nth-child(2) {
left: 11px;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.loader span:nth-child(3) {
left: 22px;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.loader span:nth-child(4) {
left: 33px;
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.loader span:nth-child(5) {
left: 44px;
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
.loader span:nth-child(6) {
left: 55px;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
@-webkit-keyframes preloader {
0% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: rgba(0, 0, 0, 0.1);
}
25% {
height: 30px;
-webkit-transform: translateY(15px);
transform: translateY(15px);
background: #f8990c;
}
50%,100% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: rgba(0, 0, 0, 0.1);
}
}
@keyframes preloader {
0% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: rgba(0, 0, 0, 0.1);
}
25% {
height: 30px;
-webkit-transform: translateY(15px);
transform: translateY(15px);
background: #f8990c;
}
50%,100% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: rgba(0, 0, 0, 0.1);
}
}