Подробное описание и демонстрацией работы эффекта загрузки под номером №28 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 28
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="box"> <span class="loader"></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.box{
margin: 30px 0;
}
.loader {
display: block;
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
border: 3px solid #00b796;
margin: 0 auto;
animation-delay:0.2s
}
.loader:before {
content: "";
width: 58px;
height: 58px;
border-radius: 50%;
display: block;
position: absolute;
top: 53%;
left: 53%;
border: 3px solid #d94e67;
margin: -32px 0 0 -32px;
animation-delay:0.4s
}
.loader:after {
content: "";
display: block;
position: absolute;
border: 3px solid #ffca00;
width: 26px;
height: 26px;
top: 53%;
left: 53%;
margin: -16px 0 0 -16px;
border-radius: 50%;
animation-delay:0.6s
}
.loader,
.loader:before,
.loader:after {
animation-name: Scale;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
-webkit-animation-name: Scale;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
@keyframes Scale {
25% {
transform: scale(-1.2, 1.2)
}
50% {
transform: scale(-1, -1)
}
75% {
transform: scale(1.2, -1.2)
}
100% {transform: scale(1, 1)}
}
@-webkit-keyframes Scale {
25% {
-webkit-transform: scale(-1.2, 1.2)
}
50% {
-webkit-transform: scale(-1, -1)
}
75% {
-webkit-transform: scale(1.2, -1.2)
}
}