Triple dot CSS animation on a loading screen

Question

I have a simple loading screen where I would like to have one dot appear at a time at the end of the text.

Unfortunately I can only get them to blink, when I would like for one to appear at a time and then start over.

I am currently using a fade in animation that looks like the following:

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

Here is a sample of what I have:

const App = () => {

  return (
  <h1>
    Loading<span>.</span><span>.</span><span>.</span>
  </h1>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

span:nth-child(1) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
}
span:nth-child(2) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
  animation-delay: 500ms;
}
span:nth-child(3) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
  animation-delay: 1000ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

As you can see, currently, it does show one at a time, but then just has all three of them blinking. How could I make them show one at a time, and then start over?

Answer 1

An easier idea with less of code:

.loading {
  font-weight: bold;
  display: inline-block;
  font-family: monospace;
  font-size: 30px;
  clip-path: inset(0 3ch 0 0);
  animation: l 1s steps(4, jump-none) infinite;
}

@keyframes l {
  to {
    clip-path: inset(0)
  }
}

<div class="loading">Loading...</div>

Find more loaders from my online collection: https://css-loaders.com/