Circular Progress
動畫百分比環形進度／量表，支援漸層、gauge 弧度與計數揭示。
以 SVG 環形呈現進度，弧線與中央數字由單一動畫節奏同步推進，支援完整環或量表 gauge。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
72
160
12
360
<CircularProgress />
安裝
npx shadcn@latest add https://webberui.com/r/circular-progress.json或在 components.json 設定 registries 後，改用 @webberui/circular-progress 安裝。
安裝依賴後，從 registry JSON（/r/circular-progress.json 的 files[0].content）複製 circular-progress.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { CircularProgress } from "@/components/ui/circular-progress";
<CircularProgress value={72} />;做成量表 gauge：把 arc 設成小於 360，再用 startAngle 對齊開口方向。
<CircularProgress value={86} arc={270} startAngle={135} />;Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | number | — | 進度百分比（0 ~ 100） |
size | number | 160 | 元件邊長（px） |
strokeWidth | number | 12 | 環的線寬（px） |
color | string | string[] | 青靛洋紅漸層 | 單色字串或沿弧線的漸層陣列 |
trackColor | string | currentColor 低透明 | 底軌顏色 |
arc | number | 360 | 弧線總跨度（度），小於 360 即為量表 |
startAngle | number | -90 | 起始角度（度），-90 為正上方 |
duration | number | 1.2 | 進場動畫時長（秒） |
delay | number | 0 | 進場前延遲（秒） |
rounded | boolean | true | 端點是否為圓頭 |
showValue | boolean | true | 是否顯示中央百分比數字 |
decimals | number | 0 | 數字小數位數 |
suffix | string | "%" | 數字後綴 |
glow | boolean | false | 為進度弧加上同色柔光 |
children | ReactNode | — | 中央自訂內容，覆蓋預設數字 |
可及性
- 使用者系統開啟「減少動態效果」時，直接以最終值渲染，不播放計數與掃描動畫
svg帶role="img"與aria-label，朗讀時報出目前百分比