JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<div class="spinner">
 <span class="circle-one"></span>
 <span class="circle-two"></span>
 <span class="circle-three"></span>
</div>

SCSS

@keyframes loadingDots {
  0% {
    opacity: 2;   
  }
  
  20% {
    opacity: 0.2;
  }
  
  100% {
    opacity: 2;
  }
}

.spinner {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 35%;
  top: 20%;
  
  .circle-one, .circle-two, .circle-three {
    background-color: #006dcc;
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 50%;
    animation: loadingDots 1.6s infinite both;
  }
  .circle-two {
    animation-delay: 0.3s
  }
  .circle-three {
    animation-delay: 0.6s
  }
  
}