Подробное описание и демонстрацией работы эффекта загрузки под номером №189 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 189
<div class="loader"> <div class="loader-inner"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 200px;
height: 100px;
margin: 30px auto;
overflow: hidden;
}
.loader .loader-inner{
width: 150px;
height: 4px;
background: #264080;
border-radius: 2px;
margin: 70px auto 0;
position: relative;
animation: loading-1 1.5s infinite ease-in-out;
}
.loader .loader-inner:after{
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 5px dotted #c58e5e;
position: absolute;
top: -50px;
animation: loading-2 1.5s infinite ease-in-out;
}
@keyframes loading-1{
0%, 100%{
transform: rotate(0);
}
30%{
transform: rotate(10deg);
}
66%{
transform: rotate(-10deg);
}
}
@keyframes loading-2{
0%, 100%{
transform: translate(-10px, 0) rotate(0);
}
50%{
transform: translate(100px, 0) rotate(180deg);
}
}