Feedback
Progress bar
Completion of a sequence, from 0 to 100%.
Examples
Upload
60%
Storage used
92%
Sync
100%
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Label | What is progressing | Required |
| 2 | Track | 4px radius | Required |
| 3 | Fill | Gradient or status colour | Required |
| 4 | Value | Percentage in text | Required |
Specifications
| Height | 34px, locked to align in tables |
|---|---|
| Track radius | 4px |
| Variants | 11 steps (0 to 100% in tens) |
| Light contrast | Slate-200 track with Slate-700 text, 4.5:1 |
Interaction
| Key | Result |
|---|---|
| None | Not interactive |
| Trigger | Response |
|---|---|
| Update | Fill width animates in 300ms |
Accessibility
role · progressbar
1.4.1Use of Colour1.4.11Non-text Contrast4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Role | role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow |
| Name | aria-labelledby points at the visible label |
| Unknown duration | Omit aria-valuenow for an indeterminate bar |
| Colour | Status colours must also show a number or word |
| Updates | Do not announce every percent; announce completion |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Show the numeric value | Do not use colour alone to say a bar is almost full |