Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать Классный Прелоадер для Своего Сайта

В этой статье будет весь код, который используется в видео ниже.

HTML Разметка

<div class = "preloader">
	<div class = "item-1 left-side">
		<span>Загр</span>
		<div class = "dot dot-1"></div>
		<div class = "dot dot-2"></div>
	</div>
	<div class = "item-1 right-side">
		<span>узка</span>
		<div class = "dot dot-3"></div>
		<div class = "dot dot-4"></div>
	</div>
	<div class = "item-2"></div>
	<div class = "item-3"></div>
	<div class = "item-4"></div>
</div>

CSS Стили

.preloader
{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9999;
}
.item-1
{
	position: relative;
	height: 100%;
	width: 50%;
	background-color: #111;
	transition: 1.5s ease;
	z-index: 9998;
}
.right-side
{
	position: absolute;
	right: 0;
	top: 0;
}
.item-1 span
{
	color: silver;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.left-side span
{
	right: 0;
}
.right-side span
{
	left: 0;
}
.dot
{
	height: 7px;
	width: 7px;
	border-radius: 100%;
	position: absolute;
	top: 53%;
}
@keyframes dot-light
{
	100%
	{
		background-color: #ff6e00;
		box-shadow: 0 0 10px #ff6e00, 0 0 10px #ff6e00;
	}
}
.dot-1
{
	right: 20px;
}
.dot-2
{
	right: 5px;
}
.dot-3
{
	left: 5px;
}
.dot-4
{
	left: 20px;
}
.item-2
{
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #222;
	z-index: 9997;
	transition: 1s;
}
.item-3
{
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #ff6e00;
	z-index: 9996;
	transition: 1s;
}
.item-4
{
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #444;
	z-index: 9995;
	transition: 1s;
}

JavaScript Код

document.body.onload = function()
{
	$(".dot-1").css("animation", "dot-light 2s 0s forwards");
	$(".dot-2").css("animation", "dot-light 2s 0.75s forwards");
	$(".dot-3").css("animation", "dot-light 2s 1.5s forwards");
	$(".dot-4").css("animation", "dot-light 2s 2.25s forwards");
	setTimeout(function(){$(".item-1").css("width", "0");}, 4000);
	setTimeout(function(){$(".item-2").css("height", "0");}, 5000);
	setTimeout(function(){$(".item-3").css("height", "0");}, 5300);
	setTimeout(function(){$(".item-4").css("height", "0");}, 5500);

	setTimeout(function(){$(".header").css({"opacity":"1", "transform":"translate(0)"});}, 6100);
	setTimeout(function(){$(".p-1").css({"opacity":"1", "transform":"translate(0)"});}, 6300);
	setTimeout(function(){$(".p-2").css({"opacity":"1", "transform":"translate(0)"});}, 6500);
	setTimeout(function(){$(".p-3").css({"opacity":"1", "transform":"translate(0)"});}, 6700);

	setTimeout(function(){$(".preloader").css("visibility", "hidden");}, 7000);
}



Оставьте свой комментарий внизу