<template>
    <div id="vue-loading" v-show="loadings.length">
        <div class="filter" v-show="full"></div>
        <div class="loader-wrap">
            <!-- <div class="loader"></div> -->
            <div class="logo">
                <img src="@/assets/image/loding-logo.png" alt="">
            </div>
            <div class="hint">{{text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Loading',
    data(){
        return {
            loadings:[],         
            text:'', 
            full:false,           //是否展示蒙层
        }
    },
}
</script>
<style lang="stylus" scoped>
    #vue-loading 
        width 100%
        height 100%
        position absolute
        left 0
        top 0
        z-index 999
        .filter
            width 100%
            height 100%
            background rgba(255,255,255,0.3);
        .loader-wrap 
            position absolute 
            left 50%
            top 50%
            transform translate(-50%,-50%)
            display flex
            flex-direction column
            justify-content center
            .logo
                // width 100%
                text-align center
                img
                    animation scal 0.8s infinite
                    opacity 0.8
                    width 16vw
            .hint
                margin-top 10px
                font-size 14px
                color #666
                text-shadow 1px 1px 3px white     
            .loader
                width 2.5em
                height 2.5em
                transform rotate(165deg)
                position relative
                &:before 
                    animation before 2s infinite
                &:after 
                    animation after 2s infinite
                &:before, 
                &:after 
                    content ''
                    position absolute
                    top 50%
                    left 50%
                    display block
                    width 0.5em
                    height 0.5em
                    border-radius 0.25em
                    transform translate(-50%, -50%)
</style>

<style>
@keyframes scal {
    0%{
        transform:scale(0.8);
    }
    50%{
        transform:scale(1);
    }
    100%{
        transform:scale(0.8);
    }
}
@keyframes before {
 0% {
 width: 0.5em;
 box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
 35% {
 width: 2.5em;
 box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }
 70% {
 width: 0.5em;
 box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }
 100% {
 box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}
@keyframes after {
 0% {
 height: 0.5em;
 box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
 35% {
 height: 2.5em;
 box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }
 70% {
 height: 0.5em;
 box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }
 100% {
 box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}
/**
 * Attempt to center the whole thing!
 */
html,
body {
 height: 100%;
}
.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}
</style>

