更新记录

1.0.0（2026-07-10） 下载此版本

初始版本

平台兼容性

uni-app(4.0)

zv-progress-ring

环形进度条组件，纯 CSS 渲染，兼容 Vue2 / Vue3、App、H5、微信小程序。

内置环形进度、实心球、渐变圆环三种样式，加载时从 0 动画到目标进度。

基础用法

<zv-progress-ring :percent="60" />

三种模式

1. 环形进度 ring（默认）

<!-- 纯色 -->
<zv-progress-ring :percent="60" color="#00d4ff" />

<!-- 渐变描边 -->
<zv-progress-ring :percent="60" :gradient="true" />

<!-- 带末端圆点 -->
<zv-progress-ring :percent="50" color="#ffb020" :show-handle="true" />

2. 实心水球 wave

<zv-progress-ring
  mode="wave"
  :percent="60"
  wave-color="#3b82f6"
  wave-bg-color="#eef6ff"
  text-color="#ffffff"
/>

<zv-progress-ring
  mode="wave"
  :percent="60"
  :show-border="true"
  border-color="#3b82f6"
  text-color="#ffffff"
/>

3. 渐变圆环 gradient

<zv-progress-ring
  mode="gradient"
  :percent="50"
  :show-handle="true"
  :colors="['#ff4d4f','#ff9f43','#ffd93d','#6bcb77','#00d4ff','#4d96ff','#9b59b6','#ff4d4f']"
/>

属性

插槽

<zv-progress-ring :percent="60" :show-text="false">
  <text style="font-size:40rpx;font-weight:bold;">50</text>
</zv-progress-ring>