要求：
*载入：
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>