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

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

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

<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner-top">
<div class="box">
<div class="box-bg"></div>
<div class="box-top box-top-1"></div>
<div class="box-top box-top-2"></div>
<div class="box-top box-top-3"></div>
<div class="box-top box-top-4"></div>
<div class="box-top box-top-5"></div>
<div class="box-top box-top-6"></div>
<div class="box-top box-top-7"></div>
<div class="box-top box-top-8"></div>
</div>
</div>
<div class="loader-inner-bottom">
<div class="box-bottom"></div>
<div class="box-bottom"></div>
<div class="box-bottom"></div>
<div class="box-bottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>

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

.demo{ background: #6d6b6b; }
.loader{
width: 25%;
height: auto;
position: relative;
padding-bottom: 25%;
margin: auto;
}
.loader .loader-inner-top{
width: 100%;
height: 75%;
overflow: hidden;
position: absolute;
top: 0;
}
.loader .box{
width: 35%;
height: 0;
padding-bottom: 35%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-animation: loading-1 3s ease infinite;
animation: loading-1 3s ease infinite;
}
.loader .box-bg{
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #de8e3e;
position: absolute;
}
.loader .box-top{
width: 20%;
height: 5px;
background: #de8e3e;
border-radius: 5px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loader .box-top-1{
transform: rotate(0deg) translateX(-350%);
}
.loader .box-top-2{
transform: rotate(45deg) translateX(-350%);
}
.loader .box-top-3{
transform: rotate(90deg) translateX(-350%);
}
.loader .box-top-4{
transform: rotate(135deg) translateX(-350%);
}
.loader .box-top-5{
transform: rotate(180deg) translateX(-350%);
}
.loader .box-top-6{
transform: rotate(225deg) translateX(-350%);
}
.loader .box-top-7{
transform: rotate(270deg) translateX(-350%);
}
.loader .box-top-8{
transform: rotate(315deg) translateX(-350%);
}
.loader .loader-inner-bottom{
width: 100%;
height: 25%;
position: absolute;
bottom: 0;
}
.loader .box-bottom{
height: 5px;
background: #de8e3e;
border-radius: 5px;
margin: 0 auto 15px;
}
.loader .box-bottom:nth-child(1){
width: 100%;
}
.loader .box-bottom:nth-child(2){
width: 75%;
}
.loader .box-bottom:nth-child(3){
width: 50%;
}
.loader .box-bottom:nth-child(4){
width: 25%;
}
@-webkit-keyframes loading-1{
0%{
transform: translateY(200%) rotate(0deg)
}
25%{
transform: translateY(0) rotate(0deg);
transition-timing-function: ease-out;
}
100%{
transform: translateY(200%) rotate(-180deg);
transition-timing-function: ease-in;
}
}
@keyframes loading-1{
0%{
transform: translateY(200%) rotate(0deg)
}
25%{
transform: translateY(0) rotate(0deg);
transition-timing-function: ease-out;
}
100%{
transform: translateY(200%) rotate(-180deg);
transition-timing-function: ease-in;
}
}
@media only screen and (max-width:990px){
.loader .box-bottom{
height: 4px;
margin-bottom: 4px;
}
}

Теги: