vue进度条组件

 <div class="global-mask" v-if="isProgress">
      <div class="contentBox">
        <div class="progresstitie">
          数据加载中请稍后
        </div>
        <el-progress class="progressStyle" :color="customColor" text-color="#fff" :text-inside="true" :stroke-width="20"
          :percentage=percentage status="success"></el-progress>
        <div class="progressSpan">拼命加载中......</div>
      </div>
    </div>



    fetchData() {
      this.percentage += 1
      if (this.percentage == 99) {
        clearInterval(this.intervalId)
      }
    },


//开始的时候执行   this.fetchData     this.isProgress= true
//结束的时候         this.isProgress= false





/* 遮罩层样式 */
.global-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* 半透明灰色 */
  z-index: 9998;
  /* 确保在内容之上 */
}

/* 可选：禁止滚动 */
.mask-active {
  overflow: hidden;
  height: 100vh;

}

.contentBox {
  width: 40%;
  margin: 0 auto !important;
  position: absolute;
  top: 35%;
  left: 30%;
  height: 230px;
  border-radius: 10px;

  background-image: url("../../../assets/images/loadingBg.png");
  background-size: cover;

}

.progressSpan {
  color: rgb(64, 158, 255);
  font-size: 16px;
  text-align: center;
  padding: 10px 0;

}

.progressStyle {
  width: 80%;
  margin: 0 auto;
}

.progresstitie {
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 100px;
}