Pure CSS Loading Animation

byCodingFlicks -December 29, 2020

0

Today I am sharing another simple Snippet based on CSS loader animation. Loading animation is what we see while the website contents are loading. It is used to keep the visitor busy while the website server finishes data processing. I have Shared lots of CSS animation based snippets in this blog. Please make sure to check those as well. Without further explanation, I am providing the source code below for your convenience.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<title>Pure CSS Loading Animation</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="loader loading-area">
		<div></div>
		<div class="box2">
			<div></div>
		</div>
		<div class="box3">
			<div></div>
		</div>
	</div>
</body>
</html>

CSS

body {
	background: #fafafa;
}
.loader {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loading-area div {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-sizing: border-box;
}
.loading-area>div {
	position: absolute;
	left: calc(50% - 30px / 2);
	top: 35%;
}
.loading-area div:not([class^="box"]) {
	animation: animate 1.8s ease-in-out infinite;
	background: #262626;
}
.box2 {
	transform: rotate(150deg) translateY(-70px) rotate(-30deg)
}
.box3 {
	transform: rotate(-150deg) translateY(-70px) rotate(30deg)
}
@keyframes animate {
	30% {
		transform: translate(40px, 70px)
	}
	60% {
		transform: translate(-40px, 70px)
	}
	100% {
		transform: translate(0, 0)
	}
}

I hope you liked this simple snippet. Please stay connected with this blog by following our social media profiles. Thanks for stopping by.

Please do not enter any spam link in the comment box.