<template>
   <span class="dots"></span>
</template>

<style scoped>

.dots {
  display: inline-block;
  width: 1.5em;  /* reserve enough space for '...' */
  text-align: left;
}

.dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

</style>
