<template>
    <div class="loading" :class="{ dark: pageType === 'dark', light: pageType === 'light' }">
        <div class="loading-page"><span></span><span></span><span></span><span></span><span></span></div>
    </div>
</template>

<script>
export default {
    props: {
        pageType: {
            type: String,
            default: 'dark'
        }
    }
};
</script>

<style lang="less" scoped>
.loading {
    .flex();
    justify-content: center;
    height: 80px;
}
.loading-page {
    position: relative;
    width: 26px;
    span {
        display: block;
        bottom: 0px;
        width: 3px;
        height: 5px;
        position: absolute;
        border-radius: 3px;
    }
}

.dark {
    .loading-page {
        span {
            background: #595959;
            animation: preloader_1 1.5s infinite ease-in-out;

            &:nth-child(2) {
                left: 6px;
                -webkit-animation-delay: 0.2s;
                -moz-animation-delay: 0.2s;
                -ms-animation-delay: 0.2s;
                -o-animation-delay: 0.2s;
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                left: 12px;
                -webkit-animation-delay: 0.4s;
                -moz-animation-delay: 0.4s;
                -ms-animation-delay: 0.4s;
                -o-animation-delay: 0.4s;
                animation-delay: 0.4s;
            }
            &:nth-child(4) {
                left: 18px;
                -webkit-animation-delay: 0.6s;
                -moz-animation-delay: 0.6s;
                -ms-animation-delay: 0.6s;
                -o-animation-delay: 0.6s;
                animation-delay: 0.6s;
            }
            &:nth-child(5) {
                left: 24px;
                -webkit-animation-delay: 0.8s;
                -moz-animation-delay: 0.8s;
                -ms-animation-delay: 0.8s;
                -o-animation-delay: 0.8s;
                animation-delay: 0.8s;
            }
        }
    }
}

.light {
    .loading-page {
        span {
            background: #c8c9cc;

            animation: preloader_2 1.5s infinite ease-in-out;

            &:nth-child(2) {
                left: 6px;
                -webkit-animation-delay: 0.2s;
                -moz-animation-delay: 0.2s;
                -ms-animation-delay: 0.2s;
                -o-animation-delay: 0.2s;
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                left: 12px;
                -webkit-animation-delay: 0.4s;
                -moz-animation-delay: 0.4s;
                -ms-animation-delay: 0.4s;
                -o-animation-delay: 0.4s;
                animation-delay: 0.4s;
            }
            &:nth-child(4) {
                left: 18px;
                -webkit-animation-delay: 0.6s;
                -moz-animation-delay: 0.6s;
                -ms-animation-delay: 0.6s;
                -o-animation-delay: 0.6s;
                animation-delay: 0.6s;
            }
            &:nth-child(5) {
                left: 24px;
                -webkit-animation-delay: 0.8s;
                -moz-animation-delay: 0.8s;
                -ms-animation-delay: 0.8s;
                -o-animation-delay: 0.8s;
                animation-delay: 0.8s;
            }
        }
    }
}

@keyframes preloader_1 {
    0% {
        height: 5px;
        transform: translateY(0px);
        background: #595959;
    }
    25% {
        height: 20px;
        transform: translateY(8px);
        background: #ffffff;
    }
    50% {
        height: 5px;
        transform: translateY(0px);
        background: #595959;
    }
    100% {
        height: 5px;
        transform: translateY(0px);
        background: #595959;
    }
}

@keyframes preloader_2 {
    0% {
        height: 5px;
        transform: translateY(0px);
        background: #c8c9cc;
    }
    25% {
        height: 20px;
        transform: translateY(8px);
        background: #939599;
    }
    50% {
        height: 5px;
        transform: translateY(0px);
        background: #c8c9cc;
    }
    100% {
        height: 5px;
        transform: translateY(0px);
        background: #c8c9cc;
    }
}
</style>
