小程序&vue 加载进度功能

<div class="circle" v-if="circleOpen">
      <van-overlay :show="overlayOpen" />
      <div class="number">
        <van-circle
          v-model="percentage"
          :rate="5"
          :speed="100"
          :stroke-width="80"
          :color="gradientColor"
          :text="percentage + '%'"
        />
        <!-- <div class="dot">动态省略号<span class="dot-ani"></span></div> -->
        <span>{{percentage<20&&percentage>12?'正在合成背景':percentage<40?'正在合成视频':percentage<60?'正在适配数字人动作':percentage<80?'正在适配数字人语音':percentage<100?'正在渲染整体效果':''}}<span class="dot-ani"></span> </span>
      </div>
    </div>

// 组件数据
data() {
 return {
  	percentage: 10, //进度条数字
    loadingTimer: "", //进度条定时器
    loadingTimerTwo: "", //进度条定时器2
 }
} 
/* 
 提交制作合成进度条loading 
*/
    scheduleLoading() {
      let that = this
      this.circleOpen = true //进度条
      let percentage = that.percentage
      that.loadingTimer = setInterval(function () {
        percentage++
        console.log("datas", percentage>=60)
        that.percentage=percentage
        if (that.percentage >= 80) {
          clearInterval(that.loadingTimer)
          //进度条由快到慢，80%后800毫秒跑一次到97%清除定时器
          that.loadingTimerTwo = setInterval(function () {
            percentage++
            that.percentage= percentage
            if (that.percentage >= 97) {
              clearInterval(that.loadingTimerTwo)
            }
          }, 800)
        }
      }, 400)
    },

//销毁页面时退出定时器
destroyed(){
  clearInterval(this.loadingTimer)
  clearInterval(this.loadingTimerTwo)
}


//不断跳动的省略号
.dot-ani {
      display: inline-block;
      height: 12px;
      line-height: 12px;
      overflow: hidden;
    }
    .dot-ani::after {
      display: inline-table;
      white-space: pre;
      content: "\A.\A..\A...\A....\A.....\A......";
      animation: spin 2s steps(4) infinite;
    }
    @keyframes spin {
      to{
        -webkit-transform:translateY(-48px);
        transform:translateY(-48px)
      }
    }

小程序

<view class="overlay">
    <van-overlay show="{{ showloadding }}">
      <view class="wrapper" style="z-index: 1000;">
        <van-circle value="{{ percentage }}" color="#0063a8">
          <text style="color: #0063a8;">{{percentage}}%</text>
        </van-circle>
        <text class="wrapperText">视频正在热火朝天地制作中</text>
      </view>
    </van-overlay>
  </view>

	loadingTimer: "", //全局定时器
    loadingTimerTwo: "", //全局定时器2
    percentage: 10, //进度条数字

/* 
   提交制作合成进度条loading 
  */
  loading() {
    let self = this
    let percentage = self.data.percentage
    self.data.loadingTimer = setInterval(function () {
      percentage++
      console.log("datas", percentage)
      self.setData({
        percentage: percentage
      })
      if (self.data.percentage >= 93) {
        console.log('我开始计时达到93%')
        clearInterval(self.data.loadingTimer)
        //进度条由快到慢，93%后一秒跑一次到99%清除定时器
        self.data.loadingTimerTwo = setInterval(function () {
          percentage++
          self.setData({
            percentage: percentage
          })
          if (self.data.percentage >= 99) {
            clearInterval(self.data.loadingTimerTwo)
          }
        }, 1000)
      }
    }, 200)
  },

引入组件

{
  "usingComponents": {
    "van-circle": "/miniprogram_npm/@vant/weapp/circle/index",
    "van-overlay": "/miniprogram_npm/@vant/weapp/overlay/index"
  }
}```