Подробное описание и демонстрацией работы эффекта загрузки под номером №175 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 175
<div class="demo"> <div class="loader"> <div class="loader-inner box-1"></div> <div class="loader-inner box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #0f7173; }
.loader{
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px solid #fbfc1b;
margin: 100px auto 50px;
position: relative;
}
.loader:before,
.loader:after{
content: "";
width: 5px;
height: 10px;
background: #fbfc1b;
margin: 0 auto;
position: absolute;
top: -15px;
left: 0;
right: 0;
}
.loader:after{
width: 25px;
height: 5px;
border-radius: 2px;
top: -17px;
}
.loader .loader-inner{
border-top: 5px solid #fbfc1b;
border-left: 5px solid #fbfc1b;
border-top-left-radius: 200px;
position: absolute;
}
.loader .box-1{
width: 40px;
height: 40px;
top: -65px;
left: 6px;
transform: rotate(45deg);
animation: loading-2 1s infinite 400ms;
}
.loader .box-2{
width: 28px;
height: 28px;
top: -43px;
left: 12px;
transform: rotate(45deg);
animation: loading-2 1s infinite 100ms;
}
.loader .box-3{
width: 7px;
height: 7px;
border-radius: 2px;
background: #fbfc1b;
margin: 0 auto;
position: absolute;
top: 0;
left: -48px;
right: 0;
transform: rotate(45deg);
}
.loader .box-4{
width: 5px;
height: 100%;
margin: 0 auto;
border-radius: 2px;
position: absolute;
left: 0;
right: 0;
animation: loading-1 1s infinite linear;
}
.loader .box-4:before{
content: "";
width: 5px;
height: 20px;
border-radius: 2px;
background: #fbfc1b;
position: absolute;
top: 8px;
}
@keyframes loading-1{
to{ transform: rotate(360deg); }
}
@keyframes loading-2{
50%{ opacity: 0.02; }
}