진행 구성 요소
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 진행 표시줄입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Progress components visualize the completion status of tasks, downloads, or multi-step processes. Built with semantic HTML progress elements and Tailwind CSS styling, progress bars communicate progress clearly to users. The Frutjam progress system supports multiple colors, sizes, and animation states for flexible integration into loading screens, forms, and dashboards.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | 타입 | Description |
|---|---|---|
| progress | Base | Horizontal progress bar |
| progress-primary | Color | Primary theme color |
| progress-secondary | Color | Secondary theme color |
| progress-accent | Color | Accent theme color |
| progress-neutral | Color | Neutral theme color |
| progress-info | Color | Info semantic color |
| progress-success | Color | Success semantic color |
| progress-warning | Color | Warning semantic color |
| progress-error | Color | Error semantic color |
Color variants
Default
1 2 3 4 5 | <progress class="progress w-56" value="0" max="100"></progress> <progress class="progress w-56" value="25" max="100"></progress> <progress class="progress w-56" value="50" max="100"></progress> <progress class="progress w-56" value="75" max="100"></progress> <progress class="progress w-56" value="100" max="100"></progress> |
1 2 3 4 5 | <progress className="progress w-56" value="0" max="100"></progress> <progress className="progress w-56" value="25" max="100"></progress> <progress className="progress w-56" value="50" max="100"></progress> <progress className="progress w-56" value="75" max="100"></progress> <progress className="progress w-56" value="100" max="100"></progress> |
Primary
html
1 2 3 4 5 | <progress class="progress progress-primary w-56" value="0" max="100"></progress> <progress class="progress progress-primary w-56" value="25" max="100"></progress> <progress class="progress progress-primary w-56" value="50" max="100"></progress> <progress class="progress progress-primary w-56" value="75" max="100"></progress> <progress class="progress progress-primary w-56" value="100" max="100"></progress> |
Secondary
html
1 2 3 4 5 | <progress class="progress progress-secondary w-56" value="0" max="100"></progress> <progress class="progress progress-secondary w-56" value="25" max="100"></progress> <progress class="progress progress-secondary w-56" value="50" max="100"></progress> <progress class="progress progress-secondary w-56" value="75" max="100"></progress> <progress class="progress progress-secondary w-56" value="100" max="100"></progress> |
Accent
html
1 2 3 4 5 | <progress class="progress progress-accent w-56" value="0" max="100"></progress> <progress class="progress progress-accent w-56" value="25" max="100"></progress> <progress class="progress progress-accent w-56" value="50" max="100"></progress> <progress class="progress progress-accent w-56" value="75" max="100"></progress> <progress class="progress progress-accent w-56" value="100" max="100"></progress> |
Neutral
html
1 2 3 4 5 | <progress class="progress progress-neutral w-56" value="0" max="100"></progress> <progress class="progress progress-neutral w-56" value="25" max="100"></progress> <progress class="progress progress-neutral w-56" value="50" max="100"></progress> <progress class="progress progress-neutral w-56" value="75" max="100"></progress> <progress class="progress progress-neutral w-56" value="100" max="100"></progress> |
Info
html
1 2 3 4 5 | <progress class="progress progress-info w-56" value="0" max="100"></progress> <progress class="progress progress-info w-56" value="25" max="100"></progress> <progress class="progress progress-info w-56" value="50" max="100"></progress> <progress class="progress progress-info w-56" value="75" max="100"></progress> <progress class="progress progress-info w-56" value="100" max="100"></progress> |
Success
html
1 2 3 4 5 | <progress class="progress progress-success w-56" value="0" max="100"></progress> <progress class="progress progress-success w-56" value="25" max="100"></progress> <progress class="progress progress-success w-56" value="50" max="100"></progress> <progress class="progress progress-success w-56" value="75" max="100"></progress> <progress class="progress progress-success w-56" value="100" max="100"></progress> |
Warning
html
1 2 3 4 5 | <progress class="progress progress-warning w-56" value="0" max="100"></progress> <progress class="progress progress-warning w-56" value="25" max="100"></progress> <progress class="progress progress-warning w-56" value="50" max="100"></progress> <progress class="progress progress-warning w-56" value="75" max="100"></progress> <progress class="progress progress-warning w-56" value="100" max="100"></progress> |
에러
html
1 2 3 4 5 | <progress class="progress progress-error w-56" value="0" max="100"></progress> <progress class="progress progress-error w-56" value="25" max="100"></progress> <progress class="progress progress-error w-56" value="50" max="100"></progress> <progress class="progress progress-error w-56" value="75" max="100"></progress> <progress class="progress progress-error w-56" value="100" max="100"></progress> |