JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#progress {
  pointer-events: none;
}

#progress .spinner-icon {
  width: 30px;
  height: 30px;
  display:block;
  border: solid 2px transparent;
  border-radius:50%;
  -webkit-animation: progress-spinner 600ms linear infinite;
          animation: progress-spinner 600ms linear infinite;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1; 
}

#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); }
}