Progress bar
Visual indicator of something that is ongoing.
Page sections
Type
Default
Usage
Use a progress bar to indicate how far along something is, such as how much of a deductible has been spent
Always use labels to indicate the fill amount versus the total amount
Visual style
Always have at least 8px margins from surrounding content
Avoid resizing the height of the progress bar
Content strategy
- Copy for progress bars can be multiple and incremental (e.g. for HSA: Spent to Date, Remaining) or overarching (e.g. $25 left until you reach your deductible)
- Generally, tend toward a single overarching value for clarity and shorter character counts
- Use Title Case for short labels (~1 – 3 words) and Sentence case for longer labels written like sentences
Accessibility
Characteristics
- Progress Bars communicate the progress made in completing a process in a percentage
- Visible for low vision users with sufficient contrast against the background
Screen reader expectations
- Announce percentage of completion. Ex. “50% completed”