vue 실용적인 구성요소 로딩, 사용자 정의 스타일

---

구성요소 로딩

1. 컴포넌트 로딩을 사용하는 이유는 무엇입니까?
해결책: 프로세스가 여전히 실행 중이고 실행이 완료되지 않은 경우 사용자는 이를 알지 못할 수 있는데, 어떻게 하면 고객이 실행을 보다 객관적으로 보고 고급감을 갖도록 할 수 있는지 사용자에게 상기시켜야 합니까? LoadIng 컴포넌트인데, elementui를 기반으로 스타일을 수정했습니다.

효과 비디오:

Vue 로딩 구성 요소

1. 구성 요소 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>

끝입니다 젊은 프로그래머 여러분, 저를 비난하지 마십시오. 모두에게 도움이 되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요.