How To Make a Loader using HTML and CSS

Easy Learning February 11, 2023

 


How To Make a Loader using HTML and CSS

Loading animation is to inform users about the wait time, reason and expectation on the status of ongoing processes, such as loading a website, submitting a form, or saving updates. Today article is about to how to Make a Loader using HTML and CSS. In this article we will make a simple but beautiful animation loader by using HTML and CSS. So Let's Start

1. First of all we make a file structure. in this project we will use two file One is index.html other one is style.css Index.html will used for basic structure of web site. in basic structure we will use only one div with class name "circular" as how below code 


<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Animation circular sLoader HTML CSS</title>
</head>
<body>
	<div class="circular"></div>
</body>
</html>
Now open style.css file and pasted below code First we zero the default setting of browser. In * selector we set padding and margin to 0. so that browser by default setting get reset. In next section we set centralizer contant with the help of flex properties. then we designned our class as per below given code.in last section we will create a animation. That's All See Below Code 
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background: green;
}

.circular{
	width: 70px;
	height: 70px;
	position: relative;
	border: 2px solid black;
	border-radius: 50%;
	animation: circle 2s linear infinite;
}
.circular:after{
	content: "";
	position: absolute;
	width: 65px;
	height: 65px;
	border-top: rgb(86, 216, 217) 5px solid;
	top: 2px;
	left: 2px;
	border-radius: 50%;
}

@keyframes circle{
	from{
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
Video Tutorial
 
Tags:

Post a Comment

0 Comments