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

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

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

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

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

.loader{
width: 40px;
height: 40px;
margin: 60px auto;
}
.loader .loader-inner{
width: 40px;
height: 40px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.loader-inner span{
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
border: 1px solid #dc005a;
-webkit-animation: loading 888ms infinite alternate;
animation: loading 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
.loader-inner .box-1{
top: 0;
left: 0;
animation-delay: 222ms;
}
.loader-inner .box-2{
top: 0;
right: 0;
animation-delay: 444ms;
}
.loader-inner .box-3{
bottom: 0;
right: 0;
animation-delay: 666ms;
}
.loader-inner .box-4{
bottom: 0;
left: 0;
animation-delay: 888ms;
}
@-webkit-keyframes loading{
to{
-moz-transform: scale(0.65);
-ms-transform: scale(0.65);
-webkit-transform: scale(0.65);
transform: scale(0.65);
background: rgba(180, 48, 107, 0.65);
}
}
@keyframes loading{
to{
-moz-transform: scale(0.65);
-ms-transform: scale(0.65);
-webkit-transform: scale(0.65);
transform: scale(0.65);
background: rgba(180, 48, 107, 0.65);
}
}

Теги: