JSFiddle - React, Tailwind, and code Playground
by ced1
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<div class="container"><div class="inner"><i class="fas fa-circle-notch"></i></div></div>
CSS
@keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}