<template>
    <div class="d-flex justify-content-center">

        <div class="loader"></div>

    </div>
</template>

<script setup>
const props = defineProps({
    count: Number
})
</script>

<style scoped>
/* HTML: <div class="loader"></div> */
.loader {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
        repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
        repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
    animation: l3 2s infinite;
}

@keyframes l3 {
    100% {
        background-size: 100%
    }
}

/* 

.loader {
    width: 22px;
    height: 22px;
    display: inline-block;
    animation: rotation-21219c47 .8s linear infinite;
    background: #e33336;
}


@keyframes rotation {
    0% {
        transform: rotate(0deg) scale(0.2);
        border-radius: 10%;
    }

    50% {
        transform: rotate(180deg) scale(1.5);
        border-radius: 50%;
    }

    100% {
        transform: rotate(360deg) scale(0.2);
        border-radius: 10%;
    }
} */
</style>
<!-- <style scoped>
.loader {
    width: 20px;
    height: 12px;
    display: block;
    margin: auto;
    position: relative;
    border-radius: 4px;
    color: #f9cd2a;
    background: currentColor;
    box-sizing: border-box;
    animation: animloader 0.6s 0.3s ease infinite alternate;
}

.loader::after,
.loader::before {
    content: '';
    box-sizing: border-box;
    width: 10px;
    height: 12px;
    background: currentColor;
    position: absolute;
    border-radius: 4px;
    top: 0;
    right: 110%;
    animation: animloader 0.6s ease infinite alternate;
}

.loader::after {
    left: 110%;
    right: auto;
    animation-delay: 0.6s;
}

@keyframes animloader {
    0% {
        width: 15px;
    }

    100% {
        width: 38px;
    }
}
</style> -->