JSFiddle - React, Tailwind, and code Playground

by Sean Geraghty

HTML

<div class = "circle">

</div>

CSS

.circle{
  position:relative;
  height:50px;
  width:50px;
  background:#fff;;
  border-radius:50%;
  margin:auto;
  overflow:hidden;
  animation-name:spin;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  border:3px solid #fff;
  border-top-color: green;
  border-right-color:green;
}

.circle::before{
    background-color: #fff;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 40px;
    height: 40px;
    left:3px;
    top:3px;
    margin:auto;
    transform:rotate(-90deg);
    animation-name:spinleft;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    border:2.2px solid #fff;
    border-bottom-color: green;
}
.circle::after{
    background-color: #fff;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 8px;
    top:8px;
    margin:auto;
    animation-name:spinleft;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    border:2px solid #fff;
    border-left-color: green;
    animation-name: spinfast;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
   }
  to{
    transform:rotate(360deg);
   }
}
@keyframes spinleft{
  from{
    transform:rotate(0deg);
   }
  to{
    transform:rotate(-720deg);
   }
}
@keyframes spinfast{
  from{
    transform:rotate(0deg);
   }
  to{
    transform:rotate(360deg);
   }
}