JSFiddle - React, Tailwind, and code Playground

https://stackoverflow.com/questions/61521030/expected-to-or-from-text-shadow

HTML

<p>
Loading
<span class="dot-one">.</span>
<span class="dot-two">.</span>
<span class="dot-three">.</span>
</p>

SCSS

.dot-one {
  animation: one 1s steps(5, end) infinite;
}
.dot-two {
  animation: two 1s steps(5, end) infinite;
}
.dot-three {
  animation: three 1s steps(5, end) infinite;
}

 @keyframes one {
  0% {
    color: white;
  }
  70% {
    color: grey;
  }
  100% {
    color: black;
  }
}

@keyframes two {
  0% {
    color: white;
  }
  40% {
    color: grey;
  }
  100% {
    color: black;
  }
}

@keyframes three {
  0% {
    color: white;
  }
  20% {
    color: grey;
  }
  100% {
    color: black;
  }
}