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> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 방사형 진행 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.