Hello readers, Today in this blog you’ll learn How to create creative loading animation in  HTML & CSS 

Loading animations are notifications that reassure users that the system is still handling their requests. When a user clicks on a link or button, the animation is displayed until the load process is complete. Some animations have progress bars that indicate how long it will take for data or content to load.

To create this program (creative loading animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.       

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <div class="circle"></div>
    </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with a .css extension.


body{
	background-color: #1b4225;
}
.circle{
	margin: 200px auto;
	width: 250px;
	height: 250px;
	border: 15px solid rgba(255,255,255,0.2);
	border-radius: 50%;
	border-top-color: #24ecff;
	animation: animate 1s linear infinite;
	
}
.circle::before{
	content:'';
	position: absolute;
	padding: 1px;
	top: 27px;
	right: 10px;
	border-radius: 50%;
	width: 25px;
    height: 25px;
    background: #24ecff;
	box-shadow: 0 0 0 5px #24ecff33,
		0 0 0 10px #24ecff22,
		0 0 0 20px #24ecff11;
	
	}
@keyframes animate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
Enjoy coding! Watch also the video tutorial:


Hey, here’s something that might interest you:

Create an Animated Navbar Menu using JavaScript, HTML & CSS
Create a snow globe with HTML and CSS