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

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

Демонстрация эффекта загрузки страницы — стиль 83

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

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

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

.loader{
width: 160px;
height: 160px;
margin: 20px auto;
position: relative;
}
.loader .loader-inner{
position: absolute;
top: 50%;
left: 50%;
}
.loader .box-1{
width: 74px;
height: 74px;
border-radius: 4px;
}
.loader .box-1:before,
.loader .box-1:after{
bottom: 2px;
}
.loader .box-1:before{
left: 2px;
}
.loader .box-1:after{
right: 2px;
}
.loader .box-2{
left: 2px;
top: 2px;
-webkit-animation-name: loading-1;
animation-name: loading-1;
}
.loader .box-1{
-webkit-animation-name: loading-2;
animation-name: loading-2;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: steps(4);
animation-timing-function: steps(4);
}
.loader .box-2{
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.box-1{
position: absolute;
color: #006aa4;
border: 2px solid;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader .box-1:before,
.loader .box-1:after{
content: "";
width: 32px;
height: 32px;
border-radius: 4px;
background: #e3b23c;
position: absolute;
}
.loader .box-1:before{
left: 2px;
}
.loader .box-1:after{
right: 2px;
}
.box-2{
position: absolute;
width: 32px;
height: 32px;
border-radius: 4px;
background: #e3b23c;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes loading-1{
33%{
left: 2px;
}
67%,100%{
left: 36px;
}
}
@keyframes loading-1{
33%{
left: 2px;
}
67%,100%{
left: 36px;
}
}
@-webkit-keyframes loading-2{
to{
-webkit-transform: translate(-50%, -50%) rotate(-405deg);
transform: translate(-50%, -50%) rotate(-405deg);
}
}
@keyframes loading-2{
to{
-webkit-transform: translate(-50%, -50%) rotate(-405deg);
transform: translate(-50%, -50%) rotate(-405deg);
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *