vue实用组件Loading，自定义样式

---

组件Loading

1.我为什么用到了组件Loading是干什么的？
解：当进程还在执行，还没有执行完成的时候，用户可能并不知道，那么我们是不是应该提示用户，那怎么样才能更让客户客观的看到正在执行，而且又有一点高级感呢？那就是LoadIng组件了，我elementui的基础上修改了他的样式。

效果视频：

vue laoding组件

一、组件Loading vscode代码，直接复制就可以用

<template>
  <div class="Lending">
    <el-dialog
      :visible.sync="issub"
      :modal-append-to-body="false"
      width="30%"
      >
      <div class="loadings">
          <div class="loading_one"> Transaction Pending</div>
          <div class="load"
              v-loading="loading"
          >
            <div class="load_son"></div>
          </div>
          <div class="loading_two">Transanction broadcast</div>
          <div class="loading_three">View on Etherscan</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    
    
  name: "HeaDer",
  data() {
    
    
    return {
    
    
      issub:true,
      loading: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.Lending {
    
    
  .loadings{
    
    
    z-index: 200;
    height: 422px;
    background: #FFFFFF;
    border-radius: 31px;
    padding-top: 34px;
    .loading_one{
    
    
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        text-align: center;
    }
    .load{
    
    
        width: 122px;
        height: 122px;
        margin:50px auto;
        /deep/ .el-loading-spinner{
    
    
            font-size: 70px;
        }
    }
    .loading_two{
    
    
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        text-align: center;
        margin-top:34px;
    }
    .loading_three{
    
    
        width: 287px;
        height: 54px;
        background: #3371FF;
        border-radius: 31px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 54px;
        
        margin:50px auto 0;
        text-align: center;
    }
    /deep/.circular{
    
    
      height: 122px !important;
      width: 122px !important;
      .path{
    
    
        stroke: #3ACB57;
        stroke-width:1;
      }
    }
    /deep/ .el-loading-spinner{
    
    
      top: 0%;
      margin-top: 0px;
    }
    /deep/ .el-loading-mask{
    
    
      background-color:inherit;
    }
  }
  .load_son{
    
    
      width: 80px;
      height: 80px;
      background: #3ACB57;
      border-radius: 50%;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
}
</style>

完成，年轻的程序员，大佬勿喷，希望对大家有用，有问题可以留言。