進行状況コンポーネント
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 | Type | 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> |