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

Подробное описание и демонстрацией работы эффекта загрузки под номером №109 для бибилиотеки 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 class="box-1"></div>
<div class="box-2"></div>
</div>
</div>
</div>
</div>
</div>

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

.demo{ background: #564056; }
.loader{
width: 270px;
height: 170px;
margin: 40px auto 0;
position: relative;
}
.loader .loader-inner{
width: 86px;
height: 86px;
background: #564056;
position: absolute;
top: 0;
left: 30%;
}
.loader .box-1{
width: 18px;
height: 18px;
border-radius: 15%;
position: absolute;
bottom: -3px;
left: 0;
background: transparent;
border: 4px solid #f5f5f5;
transform: translate(0, -1em) rotate(-45deg);
animation: loading-1 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
}
.loader .box-2{
width: 113px;
height: 113px;
position: absolute;
top: 27px;
left: 27px;
border-left: 4px solid #f5f5f5;
transform: rotate(45deg);
}
@-webkit-keyframes loading-1{
0%{
transform: translate(0, -1em) rotate(-45deg);
}
5%{
transform: translate(0, -1em) rotate(-50deg);
}
20%{
transform: translate(1em, -2em) rotate(47deg);
}
25%{
transform: translate(1em, -2em) rotate(45deg);
}
30%{
transform: translate(1em, -2em) rotate(40deg);
}
45%{
transform: translate(2em, -3em) rotate(137deg);
}
50%{
transform: translate(2em, -3em) rotate(135deg);
}
55%{
transform: translate(2em, -3em) rotate(130deg);
}
70%{
transform: translate(3em, -4em) rotate(217deg);
}
75%{
transform: translate(3em, -4em) rotate(220deg);
}
100%{
transform: translate(0, -1em) rotate(-225deg);
}
}
@keyframes loading-1{
0%{
transform: translate(0, -1em) rotate(-45deg);
}
5%{
transform: translate(0, -1em) rotate(-50deg);
}
20%{
transform: translate(1em, -2em) rotate(47deg);
}
25%{
transform: translate(1em, -2em) rotate(45deg);
}
30%{
transform: translate(1em, -2em) rotate(40deg);
}
45%{
transform: translate(2em, -3em) rotate(137deg);
}
50%{
transform: translate(2em, -3em) rotate(135deg);
}
55%{
transform: translate(2em, -3em) rotate(130deg);
}
70%{
transform: translate(3em, -4em) rotate(217deg);
}
75%{
transform: translate(3em, -4em) rotate(220deg);
}
100%{
transform: translate(0, -1em) rotate(-225deg);
}
}

Теги: