利用el-progress怎样做伪进度条

前言

在项目中遇到一个需求，由于后台返回结果给前端，这中间时间比较长，有很长的空白时间段，让人不知道这个过程进行到哪里了，所以提出一个需求，做一个假的进度条

一、遮罩层

由于我们的项目可以根据任务数去判断大概的执行时间
所以假如任务是6，我在页面做了一个假的遮罩层，代码如下：

<div class="mask" v-show="showMask">
	<el-progress :text-inside="true" :stroke-width="22" :percentage="pro" class="progress"></el-progress>
</div>

<style>
.mask{
	width:calc(100vw-200px);
	height:100vh;
	opacity:0.4,
	filter:alpha(opacity=30);
	position:absolute;
	left:190px;
	top:105px;
}
.progress{
	width:50%;
	margin:0 auto;
}
</style>

点击提交时，显示遮罩层this.showMask=true，返回结果后this.showMask=false

二、进度条

let len=6//任务数
let num=0
this.pro=0//进度条的值
let i=len - 1//因为满足条件之后num++还会执行一次，pro的值会超过100，所以这里减1处理下
this.timer=setInterval(()=>{
	if(num===i){
		clearInterval(this.timer);
		this.timer=null
	}
	num++;
	this.pro=parsetInt(num/len*100-1)
},1000)
this.showMask=true;
api.getData(params).then(res=>{//接口返回数据，将pro赋值100，遮罩层隐藏
	this.pro=100;
	this.showMask=false
})