JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="load">
<span></span>
</div>

SCSS

.load {
  width: 8px;
  height: 8px;
    margin: 0 10px;
  position: relative;
  
  span {
    display: block;
    width: 8px;
    height: 8px;
    background: #222;
    border-radius: 50%;
    position: relative;
    animation: ploop 1s .2s infinite;
  }
  
  &::before,
  &::after {
    animation: ploop 1s infinite;
    content:'';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: red;
    display: inline-block;
    position: absolute;
    left: -10px;
    top: 0;
  }
  
  &::after {
    animation: ploop 1s .4s infinite;
    background: blue;
    left: auto;
    right: -10px;
  }
}

@keyframes ploop {
  0% {transform: translateY(0)}
  20% {transform: translateY(-5px)}
  40% {transform: translateY(0)}
  100% {transform: translateY(0)}
}