<html>
<body>
<div class="main">
<div class="spin1">
<div class="spin2">
<div class="spin3">
<div class="spin4">

</div>
</div>
</div>

</div>
</div>
</body>
</html>
.main{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;

	}
	.spin4{
		height: 50px;
		width: 50px;
		border-bottom: 5px solid yellow;
		border-radius: 100%;
		animation: spin4 3s infinite linear;
	}
	.spin3{
	padding: 2px;;
		border-right: 5px solid rgb(2, 2, 2);
		border-radius: 100%;
		animation: spin3 3s infinite linear;
	}
	.spin2{
		padding: 2px;;
		border-top: 5px solid red;
		border-radius: 100%;
		animation: spin2 3s infinite linear;
	}
	.spin1{
		padding: 2px;;
		border-left: 5px solid blue;
		border-radius: 100%;
		animation: spin1 3s infinite linear;
	}
@keyframes spin1 {
	0%{
		transform:rotate(0deg)
	}
	100%{
		transform:rotate(360deg)
	}
}
@keyframes spin2 {
	0%{
		transform:rotate(360deg)
	}
	100%{
		transform:rotate(-360deg)
	}
}
@keyframes spin3 {
	0%{
		transform:rotate(-360deg)
	}
	100%{
		transform:rotate(360deg)
	}
}
@keyframes spin4 {
	0%{
		transform:rotate(360deg)
	}
	100%{
		transform:rotate(-360deg)
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.