JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}

@-moz-keyframes ellipsis {
  0% { clip-path: inset(0 100% 0 0); }
  24.9% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66.6% 0 0); }
  49.9% { clip-path: inset(0 66.6% 0 0); }
  50% { clip-path: inset(0 33.3% 0 0); }
  74.9% { clip-path: inset(0 33.3% 0 0); }
  75% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes ellipsis {
  0% { clip-path: inset(0 100% 0 0); }
  24.9% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66.6% 0 0); }
  49.9% { clip-path: inset(0 66.6% 0 0); }
  50% { clip-path: inset(0 33.3% 0 0); }
  74.9% { clip-path: inset(0 33.3% 0 0); }
  75% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}