Loader Wave

	<!DOCTYPE html>
	<html>
	<head>
	<title>Loader</title>
	</head>
	<body>

	<div class="loader"></div>

	</body>
	</html>


	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	}
	body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #000;
	}
	.loader{
	position: relative;
	width: 200px;
	height: 200px;
	background: #2196f3;
	border-radius: 50%;
	box-shadow: inset 0 0 50px #000;
	overflow: hidden;
	}
	.loader:before{
	content: '';
	position: absolute;
	top: -150%;
	left: -50%;
	width: 200%;
	height: 200%;
	border-radius: 40%;
	background: #111;
	opacity: 0.8;
	animation: animate 12s linear infinite;
	}

	@keyframes animate{
	0%
	{
	transform: rotate(0deg);
	}

	100%
	{
	transform: rotate(360deg);
	}
	}

	.loader:after{
	content: '';
	position: absolute;
	top: -150%;
	left: -50%;
	width: 200%;
	height: 200%;
	border-radius: 40%;
	background: #111;
	opacity: 0.9;
	animation: animate2 5s linear infinite;
	}

	@keyframes animate2{
	0%
	{
	transform: rotate(360deg);
	}

	100%
	{
	transform: rotate(0deg);
	}
	}
	</style>

Code Design html