JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loader-circle-spinner-1" role="status">
  <div class="visually-hidden">Loading...</div>
</div>

CSS

/* Spinner */

.loader-circle-spinner-1 {
  --size: 24px;
  --stroke-width: 4px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  border-width: var(--stroke-width);
  border-style: solid;
  border-color: var(--color) var(--color) var(--color) transparent;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite loader-circle-spinner-1-animation;
}

  @keyframes loader-circle-spinner-1-animation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Hidden description */
  
  .visually-hidden {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
  }