css圆形进度条

原创已于 2025-10-03 20:07:48 修改 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-10-03 12:03:00 首次发布

用css新特性做，style可以定义变量process

 <div class="big-circle" style="--progress:{{process}}">

      <div class="small-circle"></div>

</div>

background: conic-gradient(#99e6ff 0%, #99e6ff calc(var(--progress) * 1%), transparent 0%);做旋转变化

.big-circle {

  grid-column: 2 / 3;

  border-radius: 50%;

  width: 35px;

  height: 35px;

  background: conic-gradient(#99e6ff 0%, #99e6ff calc(var(--progress) * 1%), transparent 0%);

  margin: 0 auto;

  margin-top: 6px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.small-circle {

  border-radius: 50%;

  line-height: 35px;

  width: 30px;

  height: 30px;

  background-color: #ffffff;

}

然后用计时器变更progress的值

    onLoad: function () {
      this.updateProgress();
      this.timer = setInterval(() => {
        this.setData({
            --process
        })
      }, 1000); // 每秒更新一次
    },