CSS-анимация с тремя точками на экране загрузки

Question

У меня есть простой лоадер, на котором я хотел бы, чтобы в конце текста появлялись точки по одной точке.

К сожалению, я могу заставить их моргать только одновременно, но я хочу, чтобы точки появлялись по одной, а затем анимация начиналась заново.

В настоящее время я использую плавную анимацию, которая выглядит следующим образом:

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

Вот пример того, что у меня есть:

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>

_{Свободный перевод вопроса Triple dot CSS animation on a loading screen от участника @theJuls.}

Answer 1

Более простая идея с меньшим количеством кода:

.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) infinite;
}

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

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

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

CSS-анимация с тремя точками на экране загрузки

Ответы (1 шт):