방사형 진행 구성 요소
CSS 전용 Tailwind CSS 방사형 진행 — 백분율 표시가 있는 원형 진행 링입니다. 색상 및 크기 변형, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Radial progress components display completion percentage in a circular format, offering an elegant alternative to linear progress bars. Built with SVG-based visualization and CSS animations, radial progress adds visual interest to dashboards and status indicators. The Frutjam radial progress system supports multiple sizes and colors—ideal for metrics, completion tracking, and data visualization.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | 타입 | Description |
|---|---|---|
| radial-progress | Base | Circular progress indicator driven by --radial-progress--value |
| radial-progress-xs | Size | Extra small |
| radial-progress-sm | Size | Small |
| radial-progress-md | Size | Medium (default) |
| radial-progress-lg | Size | Large |
| radial-progress-xl | Size | Extra large |
| radial-progress-base | Color | Muted base surface color |
| radial-progress-current | Color | Explicitly inherits the current text color |
| radial-progress-primary | Color | Primary theme color |
| radial-progress-secondary | Color | Secondary theme color |
| radial-progress-accent | Color | Accent theme color |
| radial-progress-neutral | Color | Neutral theme color |
| radial-progress-info | Color | Info semantic color |
| radial-progress-success | Color | Success semantic color |
| radial-progress-warning | Color | Warning semantic color |
| radial-progress-error | Color | Error semantic color |
Basic Usage
70%
<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> } |
Radial Progress Sizes
70%
70%
70%
70%
70%
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> |
Radial Progress Colors
70%
70%
70%
70%
70%
70%
70%
70%
70%
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> |
Radial Progress with Label
85%
Tasks Completed
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> |