关于javascript: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>