Подробное описание и демонстрацией работы эффекта загрузки под номером №191 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 191
<div class="demo"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> <div class="box"></div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #0b6e71; }
.loader{
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loader .loader-inner{
width: 10px;
height: 10px;
position: relative;
}
.loader .box{
width: 100%;
height: 100%;
border-radius: 50%;
background: #ffdd04;
position: absolute;
-webkit-animation: loading-1 .8s linear infinite;
animation: loading-1 .8s linear infinite;
}
.loader .box:nth-of-type(1){
left: 100%;
-webkit-transform-origin: 80px bottom;
transform-origin: 80px bottom;
}
.loader .box:nth-of-type(2){
right: 100%;
-webkit-transform-origin: -80px top;
transform-origin: -80px top;
}
@-webkit-keyframes loading-1{
60%{
-webkit-transform: rotate(340deg);
transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-1{
60%{
-webkit-transform: rotate(340deg);
transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}