径向进度组件
最后更新:
仅限 CSS Tailwind CSS 径向进度 — 带百分比显示的圆形进度环。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
径向进度组件以圆形格式显示完成百分比，为线性进度条提供了优雅的替代方案。径向进度采用基于 SVG 的可视化和 CSS 动画构建，为仪表板和状态指示器增添了视觉趣味。 Frutjam 径向进度系统支持多种尺寸和颜色，非常适合度量、完成跟踪和数据可视化。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| radial-progress | 根据 | 由--radial-progress--value驱动的循环进度指示器 |
| radial-progress-xs | 尺寸 | 特小号 |
| radial-progress-sm | 尺寸 | 小的 |
| radial-progress-md | 尺寸 | 中（默认） |
| radial-progress-lg | 尺寸 | 大的 |
| radial-progress-xl | 尺寸 | 特大号 |
| radial-progress-base | 颜色 | 柔和的基面颜色 |
| radial-progress-current | 颜色 | 显式继承当前文本颜色 |
| radial-progress-primary | 颜色 | 主要主题颜色 |
| radial-progress-secondary | 颜色 | 次要主题色 |
| radial-progress-accent | 颜色 | 强调主题颜色 |
| radial-progress-neutral | 颜色 | 中性主题色 |
| radial-progress-info | 颜色 | 信息语义颜色 |
| radial-progress-success | 颜色 | 成功语义色 |
| radial-progress-warning | 颜色 | 警告语义颜色 |
| radial-progress-error | 颜色 | 错误语义颜色 |
基本用法
<div class="radial-progress" style="--radial-progress--value:70">70%</div> |
1 2 3 4 | function RadialProgress() { const progress = {"--radial-progress--value": 70} return <div className="radial-progress" style={progress}>70%</div> } |
径向进度尺寸
html
1 2 3 4 5 | <div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div> |
径向进度颜色
html
1 2 3 4 5 6 7 8 9 | <div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div> |
带标签的径向进度
html
1 2 3 4 5 6 | <div class="flex flex-col items-center gap-4"> <div class="text-center"> <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div> <p class="text-sm mt-2">Tasks Completed</p> </div> </div> |