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

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

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

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

<div class="demo">
<div class="loader">
<div class="loader-inner box-1">
<div class="loader-inner box-2">
<div class="loader-inner box-3"></div>
</div>
</div>
</div>
</div>

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

.demo{ background: #036a8c; }
.loader{
padding: 20px 0;
margin: 20px 0;
text-align: center;
}
.loader .loader-inner{
display: inline-block;
border: 3px solid #ffa630;
margin: 5px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(90deg);
}
.loader .box-1{ animation: loading-1 3s ease-in-out infinite; }
.loader .box-2{ animation: loading-2 3s ease-in-out infinite; }
.loader .box-3{
width: 100px;
height: 100px;
animation: loading-3 3s ease-in-out infinite;
}
@keyframes loading-1{
0%{
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
50%{
-webkit-transform: rotateX(200deg);
transform: rotateX(200deg);
}
100%{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
50%{
-webkit-transform: rotateX(250deg);
transform: rotateX(250deg);
}
100%{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes loading-3{
0%{
-webkit-transform: rotateY(30deg);
transform: rotateY(30deg);
}
50%{
-webkit-transform: rotateX(390deg);
transform: rotateX(390deg);
}
100%{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}



Теги:
0

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

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