Loading Animation

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

	<div class="container">
	<div class="box">
	<div class="circle"></div>
	<div class="circle"></div>
	</div>

	<h2>Loading....</h2>
	</div>

	</body>
	</html>


	<style type="text/css">

	body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height:100vh;
	}
	*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-family: arial;
	}
	.container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
	.container .box{
	position: relative;
	width: 200px;
	height: 200px;
	animation: rotatBox 10s linear infinite;
	}

	@keyframes rotatBox {

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

	}

	.container .box .circle{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #38c1ff;
	border-radius: 50%;
	animation: animate 5s linear infinite;
	}
	.container .box .circle:nth-child(2){
	background-color: #ff3378;
	animation-delay: -2.5s;
	}
	.container h2{margin-top: 20px; font-size: 20px; font-weight: 400; letter-spacing: 4px; color: #444;}
	@keyframes animate {

	0%{
	transform: scale(1);
	transform-origin: left;
	}

	50%{
	transform: scale(0);
	transform-origin: left;
	}
	50.01%{
	transform: scale(0);
	transform-origin: right;
	}

	100%{
	transform: scale(1);
	transform-origin: left;
	}

	}
	</style>

Code Design html