vue中H5的progress标签仿写一个进度条和逻辑

要求：

*载入：
0~5秒，每秒增加8%进度；
5~10秒，每秒增加4%进度；
10~20秒，每秒增加2%进度；
超过20秒，每秒增加0.2%进度，最多不超过95%*

<template>
    <progress :value="progressValue" max="100" class="pr"></progress>
</template>
<script>
data(){
    return{
    progressValue: 0,
}
}
methods：{
     // 进度条的控制
    getProgress() {
      let num = 0;
      let progress = 0.0;
      this.firstTime = setInterval(() => {
        num += 1;
        if (num <= 5) {
          progress += 8;
        } else if (num <= 10) {
          progress += 4;
        } else if (num <= 20) {
          progress += 2;
        } else if (num <= 30) {
          if (progress < 95){
            progress += 0.2;
          }
        }else{
          clearInterval(this.firstTime)
        }
        this.progressValue = progress;
        var picInstance = progress - 2;
        this.$refs.followPic.style.left = picInstance + "%";
      }, 1000);
    },
    // 接口返回的状态是成功的时候调用
    progerssValue(num,timer) {
      clearInterval(this.firstTime)
      this.secondTime = setInterval(() => {
        if (this.progressValue >= num) {
          clearInterval(this.secondTime)
        }else{
          this.progressValue += 1
          let picInstance = this.progressValue - 2
          this.$refs.followPic.style.left = picInstance + '%'
        }
      },timer)
    },
    getData(){
        getData().then((res)=>{
        if(res.code==0){
        this.progerssValue(100,5)
        }else{
        clearInterval(this.firstTime)//停止进度条
        }
        
})
    }
}
mounted() {
this.getData()
this.getProgress()
}
</script>

<style>
.progress-box {
  position: relative;
  width: 67%;
  height: 0.25rem;
  line-height: 0.25rem;
  margin: 0rem 0 0.3rem 14vw;
  .pr {
    width: 100%;
    height: 0.15rem;
    background: #ededed;
    border-radius: 15px;
  }
  progress::-webkit-progress-bar {
    background: #ededed;
    border-radius: 15px;
  }
  progress::-webkit-progress-value {
    border-radius: 15px;
    background-image: url(./img/progress.png);
  }
}
<style>