packages/styles/scss/components/_ellipsis-loader.scss

   1 .ellipsis-loader {
   2         display: inline-block;
   3         inline-size: 1.3em;
   4         font-family: $font-family-monospace;
   5         letter-spacing: -0.2em;
   6         vertical-align: baseline;
   7         text-align: start;
   8         white-space: pre;
   9         pointer-events: none;
  10
  11         &::before {
  12                 content: ' ';
  13                 animation: anime-ellipsis-loading 1s steps(1, start) infinite;
  14         }
  15 }
  16
  17 @keyframes anime-ellipsis-loading {
  18         0% {
  19                 content: ' ';
  20         }
  21
  22         25% {
  23                 content: '.';
  24         }
  25
  26         50% {
  27                 content: '..';
  28         }
  29
  30         75% {
  31                 content: '...';
  32         }
  33 }