<script>
/**
 * vs-panel 2022-09-20
 */
</script>
<script setup>
import { ref, reactive, onMounted } from "vue";
const props = defineProps({
    text: {
        type: String,
        default: '',
    },
});

</script>
    
<template>
    <div class="vs-loading">
        <figure>
            <div class="dot white"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </figure>
        <div class="vs-loading--text">{{props.text}}</div>
        <div class="vs-loading--mask"></div>
    </div>
</template>
    
<style  lang="scss" scoped>
.vs-loading {

    figure {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 6.250em;
        height: 6.250em;
        animation: rotate 2.4s linear infinite;
        z-index: 999;


        .white {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            animation: flash 2.4s linear infinite;
            opacity: 0;
        }

        .dot {
            position: absolute;
            margin: auto;
            width: 2.4em;
            height: 2.4em;
            border-radius: 100%;
            transition: all 1s ease;
        }

        .dot:nth-child(2) {
            top: 0;
            bottom: 0;
            left: 0;
            background: #FF4444;
            animation: dotsY 2.4s linear infinite;
        }

        .dot:nth-child(3) {
            left: 0;
            right: 0;
            top: 0;
            background: #FFBB33;
            animation: dotsX 2.4s linear infinite;
        }

        .dot:nth-child(4) {
            top: 0;
            bottom: 0;
            right: 0;
            background: #99CC00;
            animation: dotsY 2.4s linear infinite;
        }

        .dot:nth-child(5) {
            left: 0;
            right: 0;
            bottom: 0;
            background: #33B5E5;
            animation: dotsX 2.4s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0);
            }

            10% {
                width: 6.250em;
                height: 6.250em;
            }

            66% {
                width: 2.4em;
                height: 2.4em;
            }

            100% {
                transform: rotate(360deg);
                width: 6.250em;
                height: 6.250em;
            }
        }

        @keyframes dotsY {
            66% {
                opacity: .1;
                width: 2.4em;
            }

            77% {
                opacity: 1;
                width: 0;
            }
        }

        @keyframes dotsX {
            66% {
                opacity: .1;
                height: 2.4em;
            }

            77% {
                opacity: 1;
                height: 0;
            }
        }

        @keyframes flash {
            33% {
                opacity: 0;
                border-radius: 0%;
            }

            55% {
                opacity: .6;
                border-radius: 100%;
            }

            66% {
                opacity: 0;
            }
        }
    }

    .vs-loading--text {
        position: absolute;
        top: calc(50% + 60px);
        left: 50%;
        transform: translate(-50%);
        color: #fff;
        z-index: 999;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .vs-loading--mask {
        position: fixed;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: rgba(0, 0, 0, .6);
        z-index: 998;
    }
}
</style>
    