<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">
        <div class="loader"></div>
        <div class="vs-loading--text">{{props.text}}</div>
        <div class="vs-loading--mask"></div>
    </div>
</template>
        
<style  lang="scss" scoped>
$colors: hsla(337, 84, 48, 0.75) hsla(160, 50, 48, 0.75) hsla(190, 61, 65, 0.75) hsla(41, 82, 52, 0.75);
$size: 4em;
$thickness: 0.5em;

// Calculated variables.
$lat: (
    $size - $thickness) / 2;
$offset: $lat - $thickness;


.vs-loading {

    .loader {
        position: relative;
        width: $size;
        height: $size;
        transform: rotate(165deg
        );

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: $thickness;
        height: $thickness;
        border-radius: $thickness / 2;
        transform: translate(-50%, -50%);
    }

    &:before {
        animation: before 2s infinite;
    }

    &:after {
        animation: after 2s infinite;
    }
}

@keyframes before {
    0% {
        width: $thickness;
        box-shadow:
            $lat (
            -$offset) nth($colors, 1),
            (-$lat) $offset nth($colors, 3
        );
}

35% {
    width: $size;
    box-shadow:
        0 (-$offset) nth($colors, 1),
        0 $offset nth($colors, 3);
}

70% {
    width: $thickness;
    box-shadow:
        (-$lat) (-$offset) nth($colors, 1),
        $lat $offset nth($colors, 3);
}

100% {
    box-shadow:
        $lat (
        -$offset) nth($colors, 1),
        (-$lat) $offset nth($colors, 3
    );
}
}

@keyframes after {
    0% {
        height: $thickness;
        box-shadow:
            $offset $lat nth($colors, 2),
            (-$offset) (-$lat) nth($colors, 4);
    }

    35% {
        height: $size;
        box-shadow:
            $offset 0 nth($colors, 2),
            (-$offset) 0 nth($colors, 4);
    }

    70% {
        height: $thickness;
        box-shadow:
            $offset (
            -$lat) nth($colors, 2),
            (-$offset) $lat nth($colors, 4
        );
}

100% {
    box-shadow:
        $offset $lat nth($colors, 2),
        (-$offset) (-$lat) nth($colors, 4);
}
}



/**
 * Attempt to center the whole thing!
 */

.loader {
    position: absolute;
    top: calc(50% - #{$size / 2});
    left: calc(50% - #{$size / 2});
    z-index: 999
}

.vs-loading--text {
    position: absolute;
    top: calc(50% + 50px);
    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>
        