JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

SCSS

$c1: #C42541;
$c2: #053341;
$delay: -100ms;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 4px;
}

i {
  display: block;
  width: 6px;
  height: 6px;
  background: $c1;
  
  &:not(:nth-child(5)) {
    animation: cFade ((0 - $delay) * 8) infinite linear;
  }
  
  &:nth-child(2) { animation-delay: $delay * 7; }
  &:nth-child(3) { animation-delay: $delay * 6; }
  &:nth-child(6) { animation-delay: $delay * 5; }
  &:nth-child(9) { animation-delay: $delay * 4; }
  &:nth-child(8) { animation-delay: $delay * 3; }
  &:nth-child(7) { animation-delay: $delay * 2; }
  &:nth-child(4) { animation-delay: $delay * 1; }
}

@keyframes cFade {
  0%, 100% {
    background-color: $c1;
  }
  
  50% {
    background-color: $c2;
  }
}