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

</script>
            
<template>
    <div class="vs-loading">
        <div class="loading wave">
            Loading
        </div>

        <div class="vs-loading--text">{{props.text}}</div>
        <div class="vs-loading--mask"></div>
    </div>
</template>
            
<style  lang="scss" scoped>
.vs-loading {
    .loading {
        text-transform: uppercase;
        font-family: 'Cabin Condensed', sans-serif;
        font-weight: bold;
        font-size: 35pt;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
    }

    .loading-2 {
        top: 300px;
        width: 473px;
        height: 97px;
        font-size: 0;
        background: rgba(255, 255, 255, 0.06);
        margin: 0 auto;
    }

    .ff {
        position: absolute;
        font-size: 12pt;
        top: -20px;
        color: white;
        line-height: 12pt;

    }

    .loading-2-text {
        background-image: url('../icon/wtbg.jpg');
        width: 473px;
        height: 97px;
        display: inline-block;
    }

    @keyframes wave-animation {
        0% {
            background-position: 0 bottom
        };
        100% {
            background-position: 100px bottom
        };
    }

    @keyframes loading-animation {
        0% {
            background-size: 100px 0px
        };

        100% {
            background-size: 100px 100px
        };
    }

    .wave {
        background-image: url('../icon/wtbg.jpg');
        background-clip: text;
        color: rgba(0, 0, 0, 0);
        text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
        animation: wave-animation 3s infinite linear;
        background-size: 100px 100px;
        background-repeat: repeat-x;
        opacity: 1;
    }

    .wave-2 {
        background-clip: initial;
        display: inline-block;
    }

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