1. 效果图展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cf3116435af548f49c7399637ea4d2e1.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/be2864099c40461b8ad4907b2834f252.png)
2. 代码展示
// html
<view class="father">
<view class="progress" style="--progress:{{red}}; --last:{{gray}}">
</view>
</view>
// css
.father {
padding: 50px;
}
.progress {
width: 32rpx;
height: 32rpx;
background: conic-gradient(#E51717 0% var(--progress), #D9D9D9 var(--progress) 100%);
border-radius: 50%;
position: relative;
}
.progress::before {
content: "";
position: absolute;
inset: 6rpx;
background-color: #fff;
width: 20rpx;
height: 20rpx;
text-align: center;
line-height: 24rpx;
border-radius: 50%;
}
// js
Page({
data: {
time: 30,
red: '100%',
gray: "0%",
},
onLoad() {
const _this = this;
setInterval(() => {
let times = _this.data.time == 1 ? 30 : --_this.data.time;
let redCycle = (3.33 * times).toFixed(2); // 保留两位小数
_this.setData({
time: times,
red: `${redCycle}%`,
gray: `${(100 - redCycle).toFixed(2)}%` // 保留两位小数
})
}, 1 * 1000);
},
});
【参考地址】