Подробное описание и демонстрацией работы эффекта загрузки под номером №67 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 67
Loading…
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span class="text">Loading...</span> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 100px;
height: 100px;
text-align: center;
padding: 0 9px;
margin: 30px auto;
}
.loader .text{
display: block;
font-size: 16px;
color: #777;
margin-bottom: 20px;
}
.loader .loader-inner{
height: 15px;
border-radius: 15px;
background: #c2a547;
float: left;
}
.loader .loader-inner:nth-last-child(1){
-webkit-animation: loading 1.5s 1s infinite;
animation: loading 1.5s 1s infinite;
}
.loader .loader-inner:nth-last-child(2){
-webkit-animation: loading 1.5s .5s infinite;
animation: loading 1.5s .5s infinite;
}
.loader .loader-inner:nth-last-child(3){
-webkit-animation: loading 1.5s 0s infinite;
animation: loading 1.5s 0s infinite;
}
@-webkit-keyframes loading{
0%{
width: 15px;
}
50% {
width: 35px;
}
100% {
width: 15px;
}
}
@keyframes loading{
0%{
width: 15px;
}
50% {
width: 35px;
}
100% {
width: 15px;
}
}