JSFiddle - React, Tailwind, and code Playground
by Stafox
HTML
<div class="preloader-repeat"></div>
CSS
.preloader-repeat {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;
text-indent: -9999em;
border: 12px solid #55606e;
border-left-color: #24afb2;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.preloader-repeat,
.preloader-repeat:after {
border-radius: 50%;
width: 48px;
height: 48px;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}