Подробное описание и демонстрацией работы эффекта загрузки под номером №54 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 54
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span class="loader-inner box-1"></span> <span class="loader-inner box-2"></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
margin: 40px 0;
}
.loader .loader-inner{
display: block;
width: 16px;
height: 16px;
position: relative;
margin: 1px auto;
background: #008091;
}
.loader .box-1{
top: 0;
-webkit-animation: loading1 2s infinite;
animation: loading1 2s infinite;
}
.loader .box-1:after{
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 16px;
background: #008091;
margin-left: 1px;
-webkit-animation: loading1 2s infinite;
animation: loading1 2s infinite;
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.loader .box-2{
top: 0;
-webkit-animation: loading1 2s infinite;
animation: loading1 2s infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.loader .box-2:after{
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 16px;
background: #008091;
margin-left: 1px;
-webkit-animation: loading1 2s infinite;
animation: loading1 2s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes loading1{
0% {
background-color: #008091;
}
100% {
background-color: #fff;
}
}
@keyframes loading1{
0% {
background-color: #008091;
}
100% {
background-color: #fff;
}
}