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 += 1if (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;
}