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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div></div>
</div>
</div>
</div>
</div>

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

.loader > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 50px;
height: 50px;
background: #fff;
margin: 50px auto;
-webkit-animation: loader 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: loader 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
@keyframes loader {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); }
}
@-webkit-keyframes loader {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); }
}

Теги: