<template>
  <div class="Loading">
    <div class="mask"></div>
    <div class="loadingDialog">
      <div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="loadingText">加载中,请稍等</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Loading"
  }
</script>

<style scoped>
  .loadingText{
    color: #ffffff;
    margin-top: 0.3rem;
    opacity: 0.9;
    font-size: .18rem;
  }
  .Loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .mask {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.7;
  }

  .loadingDialog {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .loadEffect{
    width: 1rem;
    height: 1rem;
    position: relative;
  }
  .loadEffect span{
    display: inline-block;
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 50%;
    background: #ffffff;
    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:-0.08rem;
    -webkit-animation-delay:0.13s;
  }
  .loadEffect span:nth-child(2){
    left: 0.14rem;
    top: 0.14rem;
    -webkit-animation-delay:0.26s;
  }
  .loadEffect span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -0.08rem;
    -webkit-animation-delay:0.39s;
  }
  .loadEffect span:nth-child(4){
    top: 0.14rem;
    right:0.14rem;
    -webkit-animation-delay:0.52s;
  }
  .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-0.08rem;
    -webkit-animation-delay:0.65s;
  }
  .loadEffect span:nth-child(6){
    right: 0.14rem;
    bottom:0.14rem;
    -webkit-animation-delay:0.78s;
  }
  .loadEffect span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -0.08rem;
    -webkit-animation-delay:0.91s;
  }
  .loadEffect span:nth-child(8){
    bottom: 0.14rem;
    left: 0.14rem;
    -webkit-animation-delay:1.04s;
  }
</style>
