Preloader для сайта — стиль 160

Подробное описание и демонстрацией работы эффекта загрузки под номером №160 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки тсраницы

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner"></div>
<div class="loader-inner box"></div>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
</div>

css разметка для реализации эффекта загрузки тсраницы

.loader{
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner,
.loader .box-1,
.loader .box-2,
.loader .box-3{
width: 300px;
height: 300px;
border-radius: 50%;
border: 50px solid #0b2027;
position: absolute;
top: 0;
left: 0;
}
.loader .loader-inner{
border-width: 1px;
border-color: #f28a03;
opacity: 0;
transform-origin: 50% 50%;
-webkit-animation: loading-2 2s linear infinite;
animation: loading-2 2s linear infinite;
animation-delay: 2s;
}
.loader .loader-inner.box{ animation-delay: 2.5s; }
.loader .box-1{
width: 275px;
height: 137px;
border-width: 25px;
border-color :#ffa630;
border-radius: 0;
border-top-left-radius: 137px;
border-top-right-radius: 137px;
top: 12px;
left: 12px;
border-bottom: none;
z-index: 3;
transform-origin: 50% 100%;
-webkit-animation: loading-1 0.8s linear infinite;
animation: loading-1 0.8s linear infinite;
}
.loader .box-2{
width: 250px;
height: 250px;
border-width: 2px;
border-color: #ffa630;
top: 25px;
left: 25px;
z-index: 2;
}
.loader .box-3{ z-index: 1; }
@-webkit-keyframes loading-1{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-1{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loading-2{
49%{
opacity: 0;
}
50%{
-webkit-transform: scale(1);
opacity: 1;
}
75%{
-webkit-transform: scale(1.15);
opacity: 0.4;
}
100%{
-webkit-transform: scale(1.35);
opacity: 0;
}
}
@keyframes loading-2{
49%{
opacity: 0;
}
50%{
-webkit-transform: scale(1);
opacity: 1;
}
75%{
-webkit-transform: scale(1.15);
opacity: 0.4;
}
100%{
-webkit-transform: scale(1.35);
opacity: 0;
}
}
@media only screen and (max-width: 360px){
.loader{ overflow: hidden; }
}

Теги: