要点：

1. css旋转让元素平均分布在圆上
2. setInterval函数事件
3. 小圆圈和环形进度条跳动的速度一致
4. 小程序开发环境

代码：

1. html

<van-circlevalue="{{ rate }}"stroke-width="6"color="{{ gradientColor }}"size="400rpx"layer-color="#f0fcfe"speed="{{speed}}"><view class="countdown-box"><view class="count-box"><view class="count"> {{ count }}</view><view class="unit"> S </view></view><!-- 小圆圈 计算旋转角度--><viewclass="c-start"style="transform: rotate({{ (360 / sum) * count }}deg)"></view></view></van-circle>

2. js

Page({/*** 页面的初始数据*/data: {//倒计时总秒数sum: 10,//当前剩余秒数count: 10,// circle进度100%rate: 100,// circle渐变色gradientColor: {"0%": "#75e3f7","100%": "#75e3f7",},//Circle速度，需要根据实际情况调整speed:5000,//定时器timer: null},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {let timer = setInterval(() => {this.countdownEvent();}, 1 * 1000);this.setData({ timer });},/*** 倒计时*/countdownEvent() {let { count, rate, sum } = this.data;if (count == 0) {//倒计时结束后操作，清除定时器clearInterval(this.data.timer);return;}//当前秒数-1count = count - 1;//计算当前进度条rate = (100 / sum) * count;this.setData({ rate });/*延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）,与小圆圈和circle进度条变化速度有关*/wx.nextTick(() => {this.setData({ count });});}
});

3. css

.countdown-box {/*circle一致*/width: 400rpx;height: 400rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;border-radius: 50%;/*小圆圈的定位*/position: relative;
}
.count-box {
/*倒计时文字对齐*/display: flex;align-items: baseline;justify-content: center;
}
.count {font-family: SourceHanSansCN-Bold;font-size: 138rpx;color: #4e9df2;
}
.unit {font-family: SourceHanSansCN-Regular;font-size: 48rpx;color: #333333;
}
.c-start {/*旋转小圆圈*/width: 40rpx;height: 40rpx;background: linear-gradient(#f9fdfe, #b6eefa, #82e4f7);border-radius: 50%;position: absolute;top: -20rpx;left: 50%;/* left:50% 需要减去小圆圈半径 */margin-left: -20rpx;/* 旋转中心在正中间 214rpx是countdown-box半径加上外圈边框宽度一半 20rpx是因为top:20rpx*/transform-origin: 20rpx 214rpx;box-sizing: border-box;
}