<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"
}
}```