JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<span class="rc-loading"></span>

CSS

.rc-loading {
    margin: 20px;
    font-size: 36px;
    font-family: sans-serif;
}

.rc-loading::after {
  display: inline-block;
  animation: rc-dotty steps(1,end) 2s infinite;
  content: '';
}

@keyframes rc-dotty {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}