Прелоадер для страницы
от v2Team
Иногда на загрузку страницы ставят различные прелоадеры. Данная заглушка показывается пока грузится основной контент страницы.
Вот пример довольно легкого и функционального прелоадера. Можно использовать как шрифт так и картинки
З
А
Г
Р
У
З
К
А
Это наш блок в котором будет происходить анимация
<div class="div1">
<div class="loader">
<span>З</span>
<span>А</span>
<span>Г</span>
<span>Р</span>
<span>У</span>
<span>З</span>
<span>К</span>
<span>А</span>
</div>
</div>
А это стили для данного блока
.div1{
background:#eff3f9;
background-size:cover;
padding: 0;
margin: 0;
height: 100vh;
width:100vw;
display:flex;
align-items: center;
justify-content: center;
}
.loader{
-webkit-perspective:700px;
perspective: 700px;
}
.loader>span{
font-size: 4rem;
font-family: "franklin gothic medium",sans-serif;
display: inline-block;
animation:flip 2.6s infinite linear;
transform-origin:0 70%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
@keyframes flip{
35%{
transform: rotateX(360deg);
}
100%{
transform: rotatex(360deg);
}
}
.loader>span:nth-child(odd){
color:#035ef0;
}
.loader>span:nth-child(even){
color:#591bb2;
}
.loader>span:nth-child(2){
animation-delay: 0.3s;
}
.loader>span:nth-child(3){
animation-delay: 0.6s;
}
.loader>span:nth-child(4){
animation-delay: 0.9s;
}
.loader>span:nth-child(5){
animation-delay: 1.2s;
}
.loader>span:nth-child(6){
animation-delay: 1.5s
}
.loader>span:nth-child(7){
animation-delay: 1.8s
}
.loader>span:nth-child(8){
animation-delay: 2.1s
}
Поработаем?
Опишите свой запрос, мы расчитаем стоимость вашей задачи.