<template>
    <div v-if="isLoading" class="loading-overlay">
            <div class="loading-wrap">
                <div class="loading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <p class="loading-text white">네트워크 환경에따라 대기시간이 길어질 수 있습니다</p>
            </div>
        </div>
</template>

<script>

export default {
    data() {
        return {

        };
    },
    methods: {},
    watch: {},
    computed: {
        isLoading() {
            return this.$store.state.isLoading;
        }
    },
    mounted() {

    },
    beforeDestroy() {

    },
};

</script>

<style scoped>
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
        
        .loading-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            position: fixed;
        }
        
        .loading {
            --speed-of-animation: 0.9s;
            --gap: 6px;
            --first-color: #4c86f9;
            --second-color: #49a84c;
            --third-color: #f6bb02;
            --fourth-color: #f6bb02;
            --fifth-color: #2196f3;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            gap: 6px;
            height: 100px;

        }
        
        .loading span {
            width: 4px;
            height: 50px;
            background: var(--first-color);
            animation: scale var(--speed-of-animation) ease-in-out infinite;
        }
        
        .loading span:nth-child(2) {
            background: var(--second-color);
            animation-delay: -0.8s;
        }
        
        .loading span:nth-child(3) {
            background: var(--third-color);
            animation-delay: -0.7s;
        }
        
        .loading span:nth-child(4) {
            background: var(--fourth-color);
            animation-delay: -0.6s;
        }
        
        .loading span:nth-child(5) {
            background: var(--fifth-color);
            animation-delay: -0.5s;
        }
        .loading-text {
            font-size: 1.7rem;
            color: white; /* 텍스트 색상 */
            text-align: center; /* 중앙 정렬 */
        }

        
        @keyframes scale {
        
            0%,
            40%,
            100% {
                transform: scaleY(0.05);
            }
        
            20% {
                transform: scaleY(1);
            }
        }
        </style>
