Подробное описание и демонстрацией работы эффекта загрузки под номером №49 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 49
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner1"></div> <div class="loader-inner2"></div> <div class="loader-inner3"></div> <div class="loader-inner4"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 60px;
height: 75px;
margin: 30px auto;
position: relative;
}
.loader-inner1, .loader-inner2, .loader-inner3, .loader-inner4{
width: 12px;
height: 50px;
background-color: #e49393;
display: inline-block;
transform: translateY(25px);
}
.loader-inner1{
animation: loading .5s ease infinite alternate;
}
.loader-inner2{
animation: loading .5s ease .08s infinite alternate;
}
.loader-inner3{
animation: loading .5s ease .16s infinite alternate;
}
.loader-inner4{
animation: loading .5s ease .24s infinite alternate;
}
@-webkit-keyframes loading{
to { transform: translateY(0); }
}
@keyframes loading{
to { transform: translateY(0); }
}