<template>
  <div class="loading" v-show="visible">
    <div class="loadEffect">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="fs14 textC message">{{message}}</div>
  </div>

</template>

<script>
  export default {
    name: 'ZghLoading',
    data() {
      return {
        message: '',
        visible: false,
        onHide:function(){},
        onShow:function(){},
      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      _show(){
        this.visible=true;

      },
      _close(){
        this.visible=false;
      }
    }
  }
</script>

<style lang="less">
  @import url("../../assets/config.less");
.loading{
  @L:100px;
  width:@L;
  height:@L;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);

  z-index: 9999;
  &:after{
    content: '';
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    background:#000;
    opacity: .7;
  }
  .message{
    color:@common_cl;
    position: absolute;
    bottom:5px;
    width:100%;
    z-index: 3;
  }
}
  .loadEffect{
    @L:100px;
    width: @L;
    height: @L;
    position: relative;
    transform: scale(.5) translateY(-20px);
    z-index: 3;
  }
  .loadEffect span{
    display: inline-block;
    width: 20px;
    height: 8px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: @common_cl;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
  }
  @-webkit-keyframes load{
    0%{
      opacity: 1;
    }
    100%{
      opacity: 0.2;
    }
  }
  .loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-5px;
    -webkit-animation-delay:0.13s;
  }
  .loadEffect span:nth-child(2){
    left: 10px;
    top: 20px;
    -webkit-transform: rotate(45deg);
    -webkit-animation-delay:0.26s;
  }
  .loadEffect span:nth-child(3){
    left: 50%;
    top: 10px;
    margin-left: -15px;
    -webkit-transform: rotate(90deg);
    -webkit-animation-delay:0.39s;
  }
  .loadEffect span:nth-child(4){
    top: 20px;
    right:10px;
    -webkit-transform: rotate(135deg);
    -webkit-animation-delay:0.52s;
  }
  .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-5px;
    -webkit-transform: rotate(180deg);
    -webkit-animation-delay:0.65s;
  }
  .loadEffect span:nth-child(6){
    right: 10px;
    bottom:20px;
    -webkit-transform: rotate(225deg);
    -webkit-animation-delay:0.78s;
  }
  .loadEffect span:nth-child(7){
    bottom: 10px;
    left: 50%;
    margin-left: -15px;
    -webkit-transform: rotate(270deg);
    -webkit-animation-delay:0.91s;
  }
  .loadEffect span:nth-child(8){
    bottom: 20px;
    left: 10px;
    -webkit-transform: rotate(315deg);
    -webkit-animation-delay:1.04s;
  }
</style>
