Подробное описание и демонстрацией работы эффекта загрузки под номером №110 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 110
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #e71d36; }
.loader{
width: 100px;
height: 100px;
position: relative;
margin: 70px auto;
}
.loader .loader-inner{
width: 100px;
height: 100px;
border-radius: 50%;
border-bottom: 3px solid #f3ffbd;
-webkit-animation: loading-1 2s linear infinite;
animation: loading-1 2s linear infinite;
}
.loader .loader-inner:before{
content: "";
display: inline-block;
width: 90px;
height: 90px;
border-radius: 50%;
border-top: 3px solid #f3ffbd;
margin: 5px;
-webkit-animation: loading-1 4s linear infinite;
animation: loading-1 4s linear infinite;
}
.loader .loader-inner:after{
content: "";
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
border-left: 3px solid #f3ffbd;
margin: 15px 10px;
position: absolute;
left: 0;
-webkit-animation: loading-1 2s linear infinite;
animation: loading-1 2s linear infinite;
}
@-webkit-keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}