Let's Make a Beautiful Animation loader - HTML CSS

First of all create Two Files as per Under menioned extension.

1. index.html
2. Style .css 

In index.HTML  make a basic HTML Struture and one div with class  name spinner as per given code.


	
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Animation Loader - HTML CSS</title>
</head>
<body>
	<div class="spinner"></div>
</body>
</html>
Make another file as per above mentioned style with extension .css and add these css properties 


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


body{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: #ccc;
}

.spinner{
	width: 85px;
	height: 85px;
	border: 2px solid black;
	border-radius: 50%;
	position: relative;
	animation: loader 2s linear infinite;
}

.spinner:after{
	content: "";
	position: absolute;
	top: 5px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: blue;
}

@keyframes loader{

	from{
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}