<template>
    <span class="loader">{{ props?.loaderText || 'Loading' }}</span>
</template>
<script lang="ts" setup>
const props = defineProps<{
    loaderText?: string | number
}>()
</script>
<style scoped>
.loader {
    color: #FFF;
    display: inline-block;
    position: relative;
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.loader::after {
    content: '';
    width: 5px;
    height: 5px;
    background: currentColor;
    position: absolute;
    bottom: 10px;
    right: -5px;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
}

@keyframes animloader {
    0% {
        box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 10px 0 white, 20px 0 white;
    }
}
</style>