CSS Preloader – Animated Preloader using HTML and CSS

Loaders | April 25, 2022

Today in this blog you’ll learn how to create animated pre-loader using HTML and CSS

Video tutorial of Animated Preloader using HTML and CSS

This tutorial video can help you to create Animated Preloader using HTML and CSS

Animated Preloader using HTML and CSS [Source Codes]

This source code can help you to create Animated Preloader using HTML and CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="loading-wrap">
	<div class="loader">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<span>Loading...</span>
	</div>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #001616;
	color: #000;
}
.loading-wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
.loader{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px
}
.loader div{
	width: 60px;
	height: 60px;
	position: relative;
	background: #00c985
}
.loader span{
	grid-column: 1/3;
	text-align: center;
	font-size: 30px;
	color: #fff;
}
.loader div:before,
.loader div:after{
	content: "";
	position: absolute;
	width: 60px;
	height: 60px;
}
.loader div:before{
	background: #fff;
	animation:blink1 2.4s linear infinite;
}
.loader div:after{
	background: #00c985;
	animation:blink2 2.4s linear infinite;
}
.loader div:nth-child(2):before,
.loader div:nth-child(2):after{
	animation-delay: 0.3s
}
.loader div:nth-child(3):before,
.loader div:nth-child(3):after{
	animation-delay: 0.6s
}
.loader div:nth-child(4):before,
.loader div:nth-child(4):after{
	animation-delay: 0.9s
}

@keyframes blink1{
	0%{
		transform: scale(0);
		z-index: 2
	}
	50%,100%{
		transform: scale(1);
	}
}
@keyframes blink2{
	0%,50%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}