Иногда на загрузку страницы ставят различные прелоадеры. Данная заглушка показывается пока грузится основной контент страницы.

Вот пример довольно легкого и функционального прелоадера. Можно использовать как шрифт так и картинки

ЗАГРУЗКА

Это наш блок в котором будет происходить анимация

<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
}
Готовы сделать всю работу за Вас
от500
  • 30 минут


Поработаем?

Опишите свой запрос, мы расчитаем стоимость вашей задачи.