How to create Creative Loading Animation Effects using HTML and CSS

You may have seen different types of Creative Loading Animation Effects in many websites. There are many stylish Creative Loading Animation Effects on HTML and CSS. But today, I will show you as a Simple Creative Loading Animation Effects using HTML and CSS. This source code is really simple and easy to understand.

Creative Loading Animation Effects using HTML and CSS

This Creative Loading Animation Effects made with Only HTML & CSS. Copy source code from here.
For creating this project you have to create HTML File. Follow the steps to creating this without any error.

loader.html or loader.htm

Create an HTML file named ‘loader.html‘ and put these codes given below.

<!-- Code By Coding With Fun -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Neumorphism Loading Animation</title>
	<link rel="stylesheet" type="text/css" href="loader2.css">
</head>
<body>
	<section>
		<div class="loader">
			<span style="--i:1"></span>
			<span style="--i:2"></span>
			<span style="--i:3"></span>
			<span style="--i:4"></span>
			<span style="--i:5"></span>
			<span style="--i:6"></span>
			<span style="--i:7"></span>
			<span style="--i:8"></span>
			<span style="--i:9"></span>
			<span style="--i:10"></span>
			<span style="--i:11"></span>
			<span style="--i:12"></span>
			<span style="--i:13"></span>
			<span style="--i:14"></span>
			<span style="--i:15"></span>
			<span style="--i:16"></span>
			<span style="--i:17"></span>
			<span style="--i:18"></span>
			<span style="--i:19"></span>
			<span style="--i:20"></span>
		</div>
	</section>
</body>
</html>

loader.css

Create an CSS file named ‘loader.css‘ and put these codes given below.

/* Code By Coding With Fun */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

section {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #042104;
	animation: animateBg 10s linear infinite;
}

@keyframes animateBg {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(100deg);
	}
}

section .loader {
	position: relative;
	width: 120px;
	height: 120px;
}

section .loader span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(calc(18deg * var(--i)));
}

section .loader span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #00ff0a;
	box-shadow: 0 0 10px #000,
				0 0 20px #000,
				0 0 40px #000,
				0 0 60px #000,
				0 0 80px #000,
				0 0 100px #000;
	animation: animate 2s linear infinite;
	animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
	0%{
		transform: scale(1);
	}
	80%,100%{
		transform: scale(0);
	}
}

That’s it. Now you have successfully create Creative Loading Animation Effects. If you have any doubt or question comment down below.

I hope this post will useful to you, Thanks For Visiting, Keep Visiting.

How to create Creative Loading Animation Effects using HTML and CSS