JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

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

CSS

body {
	margin: 0; 
	padding: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1e272e;
}


.loader {
	display: inline-block;
	width: 55px;
	height: 55px;
  margin: 20px;
	background-color: #b9ff57;
	border-radius: 0;
	animation-name: rotate;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes rotate{
	0% {
		transform: rotate(0deg);
		border-radius: 0;
	}

	25% {
		transform: rotate(45deg);
		border-radius: 0;
		border-top-Left-radius: 50%;
		background-color: #ff9b57;
	}

	50% {
		transform: rotate(90deg);
		border-radius: 0;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #57cbff;
	}

	75% {
		transform: rotate(135deg);
		border-radius: 0;
		border-top-Left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		background-color: #d457ff;
	}

	100% {
		transform: rotate(180deg);
		border-radius: 50%;
	}

}