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

【参考地址】