JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<div class="loading">
</div>
<div class="loading2">
</div>
<div class="">
	<svg id="svg-loading">
		<circle id="circle-top" cx="50" cy="50" fill="none" stroke="#ddd" stroke-width="2"/>
		<circle id="circle-bottom" cx="50" cy="50" fill="none" stroke="#ddd" stroke-width="2"/>
	</svg>
</div>

CSS

.loading, 
.loading2 {
	position: relative;
	background: transparent;
	width: 100%;
	float:left;
	height: 32px;
}
.loading2 {
	margin-top:20px;
	width: 32px;
  overflow: hidden;
}
.loading:after, 
.loading:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 32px;
	width: 32px;
	border-radius: 50%;
	border: 2px solid #ddd;
}
.loading:after {
	border-top-color: #FF0229;
	animation: loading 1s linear infinite;
}
.loading2:after, 
.loading2:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 32px;
	border-top: 2px solid #ddd;
}
.loading2:after {
	width: 16px;
	border-top-color: #FF0229;
	animation: loading2 1s cubic-bezier(0.25, 0.46, 0.07, 0.67) infinite;
}
@keyframes loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes loading2 {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(200%);
	}
}