rag/resources/js/Components/AnimatedDots.vue

<script setup>
defineProps({
    animating: {
        type: Boolean,
        default: true
    }
})

</script>

<template>
    <span :class="{ dots: animating }"></span>
</template>

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

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