css - - - - - 环形倒计时进度条实现

1. 效果图展示

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);},
});

【参考地址】