How to create Glowing Gradient Loader Animation Effects using HTML and CSS

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

Glowing Gradient Loader Animation Effects using HTML and CSS

This Glowing Gradient Loader 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.

loader1.html or loader1.htm

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

loader1.css

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

/* Code By Coding With Fun */

 body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #303030;
}

.circle {
	position: relative;
	width: 300px;
	height: 300px;
	background: linear-gradient(#33ccff, #ff0066);
	border-radius: 50%;
	animation: animate 0.5s linear infinite;
}

@keyframes animate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.circle:after {
	content: '';
	position: absolute;
	top: 35px;
	left: 35px;
	right: 35px;
	bottom: 35px;
	background: #303030;
	border-radius: 50%;

}

.circle span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(#33ccff, #ff0066);
	border-radius: 50%;
}

.circle span:nth-child(1) {
	filter: blur(5px);
}
.circle span:nth-child(2) {
	filter: blur(10px);
}
.circle span:nth-child(3) {
	filter: blur(20px);
}
.circle span:nth-child(4) {
	filter: blur(50px);
}

That’s it. Now you have successfully create Glowing Gradient Loader 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 Glowing Gradient Loader Animation Effects using HTML and CSS