CircleProgress 环形进度条

以圆环形式展示进度，支持自定义颜色、大小、方向

以圆环形式展示进度，支持自定义颜色、大小、方向

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-circle-progress class="demo-circle-0" :percentage="0" />
  <re-circle-progress class="demo-circle-30" :percentage="30" />
  <re-circle-progress class="demo-circle-60" :percentage="60" />
  <re-circle-progress class="demo-circle-100" :percentage="100" />

<!-- 不同尺寸 -->
  <re-circle-progress class="demo-circle-small" :percentage="50" :size="60" />
  <re-circle-progress class="demo-circle-medium" :percentage="50" :size="80" />
  <re-circle-progress class="demo-circle-large" :percentage="50" :size="120" />

<!-- 线条宽度 -->
  <re-circle-progress class="demo-circle-thin" :percentage="50" :strokeWidth="3" />
  <re-circle-progress class="demo-circle-normal" :percentage="50" :strokeWidth="6" />
  <re-circle-progress class="demo-circle-thick" :percentage="50" :strokeWidth="12" />

<!-- 不同颜色 -->
  <re-circle-progress class="demo-circle-blue" :percentage="50" color="#0052d9" />
  <re-circle-progress class="demo-circle-green" :percentage="50" color="#00a870" />
  <re-circle-progress class="demo-circle-red" :percentage="50" color="#e34d59" />

<!-- 显示标签 -->
  <re-circle-progress class="demo-circle-label" :percentage="45" :showLabel="true" />
  <re-circle-progress class="demo-circle-no-label" :percentage="45" :showLabel="false" />

<!-- 自定义样式 -->
  <re-circle-progress class="demo-circle-custom-style" :percentage="50" customStyle="margin-top: 10px;" />

<!-- 不同进度 -->
  <re-circle-progress class="demo-circle-10" :percentage="10" :showLabel="true" />
  <re-circle-progress class="demo-circle-25" :percentage="25" :showLabel="true" />
  <re-circle-progress class="demo-circle-75" :percentage="75" :showLabel="true" />
  <re-circle-progress class="demo-circle-90" :percentage="90" :showLabel="true" />

<!-- 完整属性 -->
  <re-circle-progress class="demo-circle-all" :percentage="80" :size="120" :strokeWidth="8" color="#0052d9" :showLabel="true" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-circle-progress />。

API

CircleProgress Props

名称类型默认值描述必传
percentagenumber0进度百分比 0-100N
sizenumber80圆环尺寸（px）N
strokeWidthnumber6线条宽度（px）N
colorstring"#0052d9"进度条颜色N
trackColorstring"#e7e7e7"轨道颜色N
clockwisebooleantrue是否顺时针方向N
showLabelbooleantrue是否显示标签N
labelstring""自定义标签文字N
customStylestring""自定义样式N

CircleProgress Events

名称参数描述
---

CircleProgress Slots

名称描述
--
Cell 单元格
用于各个类别行的信息展示
Collapse 折叠面板
参考 TDesign 的示例结构，展示基础折叠、状态说明、手风琴和卡片式视觉效果。