JSFiddle - React, Tailwind, and code Playground
by Tyler Brown
HTML
<div class="loading-indicator"></div>
CSS
.loading-indicator {
width: 50px;
height: 50px;
border: 4px solid transparent;
border-radius: 100px;
border-color: #0094b7 #0094b7 transparent transparent;
-webkit-animation: spin 1000ms infinite linear;
-moz-animation: spin 1000ms infinite linear;
-ms-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}