JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress">
    <span class="spinner-icon"></span>
</div>

CSS

body {padding:10%;}

#progress {
  pointer-events: none;
  position:relative;
}
#progress .spinner-icon::after {content:'';border-radius:50%;background-color:#FFF; width:26px; height:26px; position:absolute;left:2px; top:2px;}
#progress .spinner-icon {
  width: 30px;
  height: 30px;
  display:block;
  background-image:-webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-radius:50%;
  -webkit-animation: progress-spinner 600ms linear infinite;
          animation: progress-spinner 600ms linear infinite;
}

#progress  {
  position: absolute;
    border-radius:50%;
}


@-webkit-keyframes progress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes progress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}