css - - - - - 环形倒计时进度条实现
- 1. 效果图展示
- 2. 代码展示
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);
},
});
【参考地址】