Подробное описание и демонстрацией работы эффекта загрузки под номером №156 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 156
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #09273d; }
.loader{
width: 150px;
height: 150px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.loader .loader-inner{ height: 100%; }
.loader,
.loader .loader-inner{
padding: 8px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #cf1c5d;
border-left-color: #ddfe33;
-webkit-animation: loading-1 linear 3.5s infinite;
animation: loading-1 linear 3.5s infinite;
-webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}