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

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

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

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

<div class="preloader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>

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

.preloader{
height: 105px;
width: 105px;
margin: 0 auto;
animation: loader-container 10s linear infinite;
}
.preloader > div{
width: 44px;
height: 44px;
box-shadow: 0 0 8px -2px rgba(0,0,0,0.3);
position: absolute;
animation-duration: 1500ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.box1{
background: linear-gradient(-45deg,#ff0000,#d60c0c);
transform-origin: bottom center;
top: 4px;
left: 4px;
animation-name: box1;
}
.box2{
background: linear-gradient(-45deg,#15c109,#29870d);
transform-origin: center left;
top: 4px;
right: 4px;
animation-name: box2;
}
.box3{
background: linear-gradient(-45deg,#c300ff,#a808a8);
transform-origin: top center;
bottom: 4px;
right: 4px;
animation-name: box3;
}
.box4{
background: linear-gradient(-45deg,#fc8e28,#ea7e0b);
transform-origin: center right;
bottom: 4px;
left: 4px;
animation-name: box4;
}
@keyframes loader-container{
0%{ transform: rotate(0); }
23%{ transform: rotate(0); }
25%{ transform: rotate(90deg); }
48%{ transform: rotate(90deg); }
50%{ transform: rotate(180deg); }
73%{ transform: rotate(180deg); }
75%{ transform: rotate(270deg); }
98%{ transform: rotate(270deg); }
100%{ transform: rotate(360deg); }
}
@keyframes box1{
0%{ transform: perspective(200px) rotateX(90deg); }
11%{ transform: perspective(200px) rotateX(0); }
88%{ transform: perspective(200px) rotateX(0); }
99%{ transform: perspective(200px) rotateX(90deg); }
100%{ transform: perspective(200px) rotateX(90deg); }
}
@keyframes box2{
0%{ transform: perspective(200px) rotateY(90deg); }
11%{ transform: perspective(200px) rotateY(90deg); }
22%{ transform: perspective(200px) rotateY(0); }
77%{ transform: perspective(200px) rotateY(0); }
88%{ transform: perspective(200px) rotateY(90deg); }
100%{ transform: perspective(200px) rotateY(90deg); }
}
@keyframes box3{
0%{ transform: perspective(200px) rotateX(-90deg); }
22%{ transform: perspective(200px) rotateX(-90deg); }
33%{ transform: perspective(200px) rotateX(0); }
66%{ transform: perspective(200px) rotateX(0); }
77%{ transform: perspective(200px) rotateX(-90deg); }
100%{ transform: perspective(200px) rotateX(-90deg); }
}
@keyframes box4{
0%{ transform: perspective(200px) rotateY(-90deg); }
33%{ transform: perspective(200px) rotateY(-90deg); }
44%{ transform: perspective(200px) rotateY(0); }
55%{ transform: perspective(200px) rotateY(0); }
66%{ transform: perspective(200px) rotateY(-90deg); }
100%{ transform: perspective(200px) rotateY(-90deg); }
}



Теги:
0

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

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