<template>
  <span>
    <span :class="{ 'tw-invisible': dots < 1 }">.</span>
    <span :class="{ 'tw-invisible': dots < 2 }">.</span>
    <span :class="{ 'tw-invisible': dots < 3 }">.</span>
  </span>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dots = ref(0)
setInterval(() => (dots.value = (dots.value + 1) % 4), 500)
</script>