JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div class="loading-animation">
<div class="looper">

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

CSS

body {
  background-color:#ff9900;
  
}
.loading-animation {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -18px;
	margin-left: -18px;
	border-radius: 50%;
	overflow: hidden;
	width: 36px;
	height: 36px;
	transition: 50ms linear;
	background-color: #e8e8e8;
  z-index:2;
}

.loading-animation>.looper {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -20px;
	width: 40px;
	height: 16px;
	transition: 50ms linear;
	animation-name: loading-anim-loop;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	transform: rotate(0deg);
	background-color: #212121;
}

.loading-animation:before {
	content: '';
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: absolute;
	border-radius: 50%;
	background-color: #212121;
	border: 2px solid #e8e8e8;
}

@keyframes loading-anim-loop {
	0% {
	transform: rotate(0deg);
	}
	20% {
	transform: rotate(72deg);
	}
	40% {
	transform: rotate(144deg);
	}
	60% {
	transform: rotate(216deg);
	}
	80% {
	transform: rotate(288deg);
	}
	100% {
	transform: rotate(360deg);
	}
}