Анимация CSS Triple Dot на экране загрузки ⇐ CSS

[Anonymous]

У меня есть простой экран загрузки, где я хотел бы, чтобы одна точка появилась в конце текста. Хотел бы, чтобы один появился за раз, а затем начал все сначала. = "lang-css prettyprint-override">@keyframes fadeIn {
0% { opacity: 0 }
100% { opacity: 1 }
}
< /code>
Вот образец того, что у меня есть: < /p>


const App = () => {

return (

Loading...

)
}

ReactDOM.render(
,
document.getElementById('app')
);< /code>
@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;
}< /code>


< /code>
< /div>
< /div>
< /p>
Как вы можете видеть, в настоящее время он показывает по одному, Но потом просто все трое мигают. Как я мог заставить их показать по одному, а затем начать все сначала?


Подробнее здесь: https://stackoverflow.com/questions/676 ... ing-screen