<!--  -->
<template>
  <div class="page-loading">
        <span class="loading">
            <span class="bar bar1"></span>
            <span class="bar bar2"></span>
            <span class="bar bar3"></span>
            <span class="bar bar4"></span>
            <span class="bar bar5"></span>
            <span class="bar bar6"></span>
            <span class="bar bar7"></span>
            <span class="bar bar8"></span>
        </span>
    </div>
</template>

<script>
export default {
  name: '',
  mixins: [],
  components: {},
  data () {
    return {}
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {},
  beforeDestroy () {},
  destroyed () {},
  beforeUpdate () {},
  updated () {}
}
</script>
<style lang='scss' scoped>
body {
    background-color: #fff
}
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
}

.page-loading .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 120px;
}
.page-loading .loading .bar {
    /* position: absolute; */
    display: inline-block;
    height: 60px;
    width: 6px;
    background: white;
    transform-origin: bottom center;
    /* padding: 0 5px; */
    animation: pageLoading 1.5s infinite ease-in-out;
}
.page-loading .loading .bar1 {
    animation-delay: .1s;
}
.page-loading .loading .bar2 {
    animation-delay: .2s;
}
.page-loading .loading .bar3 {
    animation-delay: .3s;
}
.page-loading .loading .bar4 {
    animation-delay: .4s;
}
.page-loading .loading .bar5 {
    animation-delay: .5s;
}
.page-loading .loading .bar6 {
    animation-delay: .6s;
}
.page-loading .loading .bar7 {
    animation-delay: .7s;
}
.page-loading .loading .bar8 {
    animation-delay: .8s;
}
@keyframes pageLoading {
    0% {
        transform: scaleY(0.1);
        background-color: #ffffff;
    }
    50% {
        transform: scaleY(1);
        background-color: #2ecc71;
    }
    100% {
        transform: scaleY(0.1);
        background-color: transparent;
    }
}
</style>
