<template>
    <div class="flex items-center gap-2 text-sm uppercase">
        <span class="loader-dots">
            <span class="loader-dot"></span>
            <span class="loader-dot"></span>
            <span class="loader-dot"></span>
        </span>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.loader-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.loader-dot {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: currentColor;
    animation: loader-bounce 1s infinite ease-in-out;
}

.loader-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.loader-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes loader-bounce {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}
</style>
