Radial Progress 环形进度

RadialProgress 现在不再只是 DaisyUI 的静态 class 包装。它可以使用 Rue 当前的环形视觉、 value / size / thickness 写法和 className 习惯，同时补上 percent、max、dashboard、 success、steps、format 和 showInfo 等更接近 Progress 的能力。

何时使用

需要比线性 Progress 更聚焦的单值表达，比如健康分、完成度、评分和容量水位。
需要保持 DaisyUI 的轻量环形观感，但又希望补充 dashboard、success segment 和 steps 这种行为层 API。
需要在中心区域放置百分比、状态图标或业务文案，而不是单纯显示一个静态圆环。

# Radial progress

展示最基础的 DaisyUI 风格写法，同时支持用 value/max 直接映射到百分比。

70%

42 / 84

# Different values

基础示例保持不动，用来快速扫一圈 0 到 100 的状态变化。

20%

60%

80%

100%

# Status and formatting

showInfo、format 和 status 组合起来，就能把中心内容从静态百分比组织成业务状态位。

format

部署中 72%

success icon

exception

# Dashboard and custom content

dashboard 缺口、success 分段和 children 自定义内容都可以叠在同一套 Rue 视觉上。

dashboard

66%

success split

44% / 78%

custom content

92%

healthy

# Steps and split success

steps 适合阶段式进度，success 可以把已完成和进行中拆成两段，信息层也可以单独隐藏。

circle steps

60%

colorful steps

success segment

46% done

# Custom colors

基础的 className 自定义方式展示，同时也能混用 strokeColor 和 railColor 这类更显式的 API。

70%

84%

# Custom size and thickness

基础的 thin / thick 示例保持，同时 size 继续接受 CSS 长度，适合和布局系统联动。

thin

thick

API

RadialProgress 使用了 DaisyUI 的尺寸和 className 心智，但把最常用的环形进度行为 API 收敛到了一个组件里。如果你已经在用 Rue 的 Progress，这里大部分字段会有熟悉的手感。

属性	说明	类型	默认值
`value / percent`	既支持 DaisyUI 基础的 value 写法，也支持更接近 Progress 的 percent 写法；percent 优先级更高	`number \| string`	`0`
`max`	与 value 配合，把任意范围的数值归一到 0 到 100	`number \| string`	`-`
`type`	切换整圆和 dashboard 两种形态	`circle` \| `dashboard`	`circle`
`status`	补充 success 和 exception 语义，默认在 100% 时自动切到 success	`normal` \| `success` \| `exception`	`normal`
`showInfo`	控制中心文案或状态图标是否显示	`boolean`	`true`
`format`	自定义中心文案，签名与 Progress 对齐	`(percent, successPercent) => any`	`-`
`success`	绘制 success 分段，可传 percent 或 value，并支持 success.strokeColor	`{ percent?: number; value?: number \| string; strokeColor?: string }`	`-`
`size`	支持数字、CSS 长度和 small/default/medium 语义尺寸	`number \| string \| 'small' \| 'default' \| 'medium'`	`default`
`thickness / strokeWidth`	支持 thickness，同时支持 strokeWidth 作为别名	`number \| string`	`size / 10`
`strokeColor / railColor`	分别控制进度段和轨道颜色；steps 模式下 strokeColor 可传 string[]	`string \| string[]`	`-`
`steps`	把整圆切成离散分段，适合阶段式流程或评分环	`number \| { count: number; gap: number }`	`-`
`gapDegree / gapPlacement`	dashboard 缺口大小和位置控制，也支持基础的 gapPosition	`number / top \| bottom \| start \| end`	`75 / bottom`