<template>
    <div class="crm-loading">
        <!-- <img src="@/assets/images/hd_logo.png" class="loading-img" />
        <div class='loader loader--audioWave'></div> -->
        <l-dot-spinner size="60" speed="0.9" color="#fff" ></l-dot-spinner>
        <div style="margin: 20px;color: #fff;" v-if="text" >{{ text }}</div>
    </div>
</template>

<script setup name="CrmLoading">
import { dotSpinner } from 'ldrs'

dotSpinner.register()

const props = defineProps({
    text: String
})

</script>

<style lang="scss" scoped>
.crm-loading {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loading-img {
        width: 200px;
    }

    .loader--audioWave {
        width: 3em;
        height: 2em;
        background: linear-gradient(whitesmoke, whitesmoke) 0 50%, linear-gradient(whitesmoke, whitesmoke) 0.625em 50%, linear-gradient(whitesmoke, whitesmoke) 1.25em 50%, linear-gradient(whitesmoke, whitesmoke) 1.875em 50%, linear-gradient(whitesmoke, whitesmoke) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
        animation: audioWave 1.5s linear infinite;
    }
}

@keyframes audioWave {
    25% {
        background: linear-gradient(#1eb7e0, #1eb7e0) 0 50%, linear-gradient(whitesmoke, whitesmoke) 0.625em 50%, linear-gradient(whitesmoke, whitesmoke) 1.25em 50%, linear-gradient(whitesmoke, whitesmoke) 1.875em 50%, linear-gradient(whitesmoke, whitesmoke) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
    }
    37.5% {
        background: linear-gradient(whitesmoke, whitesmoke) 0 50%, linear-gradient(#1eb7e0, #1eb7e0) 0.625em 50%, linear-gradient(whitesmoke, whitesmoke) 1.25em 50%, linear-gradient(whitesmoke, whitesmoke) 1.875em 50%, linear-gradient(whitesmoke, whitesmoke) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
    }
    50% {
        background: linear-gradient(whitesmoke, whitesmoke) 0 50%, linear-gradient(whitesmoke, whitesmoke) 0.625em 50%, linear-gradient(#1eb7e0, #1eb7e0) 1.25em 50%, linear-gradient(whitesmoke, whitesmoke) 1.875em 50%, linear-gradient(whitesmoke, whitesmoke) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em;
    }
    62.5% {
        background: linear-gradient(whitesmoke, whitesmoke) 0 50%, linear-gradient(whitesmoke, whitesmoke) 0.625em 50%, linear-gradient(whitesmoke, whitesmoke) 1.25em 50%, linear-gradient(#1eb7e0, #1eb7e0) 1.875em 50%, linear-gradient(whitesmoke, whitesmoke) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em;
    }
    75% {
        background: linear-gradient(whitesmoke, whitesmoke) 0 50%, linear-gradient(whitesmoke, whitesmoke) 0.625em 50%, linear-gradient(whitesmoke, whitesmoke) 1.25em 50%, linear-gradient(whitesmoke, whitesmoke) 1.875em 50%, linear-gradient(#1eb7e0, #1eb7e0) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em;
    }
}
</style>