<template>
    <div class="loading-container" v-show="loadingShow">
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'loading-page',
  data () {
    return {
      loadingShow: false
    }
  }
}
</script>

<style scoped lang="scss">
    .loading-container{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: var(--zIndex-snackbar);
        background: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .loading{
        width: 40px;
        display: flex;
        justify-content: space-between;
    }
    .loading span{
        display: inline-block;
        width: 5px;
        height: 100%;
        border-radius: 4px;
        background: #42A5F5;
        -webkit-animation: load 1s ease infinite;
        animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 20px;
            // background: lightgreen;
        }
        50%{
            height: 50px;
            margin: -15px 0;
            // background: lightblue;
        }
    }
    @keyframes load{
        0%,100%{
            height: 20px;
            // background: lightgreen;
        }
        50%{
            height: 50px;
            margin: -15px 0;
            // background: lightblue;
        }
    }
    .loading span:nth-child(2){
        -webkit-animation-delay:0.2s;
        animation-delay:0.2s;
    }
    .loading span:nth-child(3){
        -webkit-animation-delay:0.4s;
        animation-delay:0.4s;
    }
    .loading span:nth-child(4){
        -webkit-animation-delay:0.6s;
        animation-delay:0.6s;
    }
    .loading span:nth-child(5){
        -webkit-animation-delay:0.8s;
        animation-delay:0.8s;
    }
</style>
