JSFiddle - React, Tailwind, and code Playground

by rubys

HTML

<div class="preloader">

CSS

body {
  background-color: gray;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform:  rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform:  rotate(360deg); transform: rotate(360deg); } }

.preloader {
  animation-name: spin;
  animation-duration: .5s;
  animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  animation-animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  border: 2px solid transparent;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-radius: 50px;
  opacity: 1;
  width: 32px;
  height: 32px;
  cursor: wait;
  display: block;
  transition: all 400ms ease !important;
  -webkit-animation: spin .6s linear infinite;
  -o-animation: spin .6s linear infinite;
  animation: spin .6s linear infinite;
}