Подробное описание и демонстрацией работы эффекта загрузки под номером №188 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 188
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #d33d3d; }
.loader{
width: 150px;
height: 150px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.loader .loader-inner{
width: 10px;
height: 10px;
border-radius: 50%;
background: #f4f203;
margin: 0 auto;
color: #f4f203;
position: relative;
top: 45%;
transform: translateZ(0);
animation: loading-1 1.3s infinite linear;
}
.loader .loader-inner:before{
content: "";
width: 20px;
height: 2px;
background: #f4f203;
position: absolute;
top: 4px;
left: -5px;
}
.loader .loader-inner:after{
content: "";
position: absolute;
width: 2px;
height: 20px;
background: #f4f203;
top: -50%;
left: 4px;
}
@keyframes loading-1{
0%,100%{
box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 ;
transform: rotate(0deg);
}
30%{
box-shadow: 20px 0 0 0, 0 20px 0 0, -20px 0 0 0, 0 -20px 0 0, 15px -15px 0 0, -15px 15px 0 0, -15px -15px 0 0, 15px 15px 0 0;
}
60%{
box-shadow: 30px 0 0 0, 0 30px 0 0, -30px 0 0 0, 0 -30px 0 0, 8px -8px 0 0, -8px 8px 0 0, -8px -8px 0 0, 8px 8px 0 0;
}
100%{
transform: rotate(360deg);
}
}