JSFiddle - React, Tailwind, and code Playground

HTML

<span></span><span></span><span></span><span></span>

CSS

body {
    text-align:center;
}
@keyframes loading {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: .2;
    transform: scale(0.3);
  }
}

span {
    display:inline-block;
    width:1.5em;
    height:1.5em;
    border-radius:50%;
    background:#3498DB;
    margin:.7em;
    opacity:.2;
    animation-name: loading;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform: scale(0.3);
}

span:nth-child(2) {
    animation-delay: .1s;
}
span:nth-child(3) {
    animation-delay: .2s;
}
span:nth-child(4) {
    animation-delay: .3s;
}