Line Progress Bar
A horizontal track that fills to show how far a task has gone: an upload, a setup, a quota. It shows a known amount, not an open wait.
Preview
Status
brand-assets.zip60%
60%
When to use
- For a task with a known total, where the value is worth showing.
- For usage against a limit: storage, seats, credits.
Reach for something else
- When the length is unknown: that is a Spinner.
- Where space is square: that is a Circular Progress Bar.
Anatomy
- 1
Label
What is in progress.
- 2
Value
The percentage or the count, at the end of the label row.
- 3
Track
The full length, in a light grey.
- 4
Fill
The progress, in the brand colour, with rounded ends.
States
In progress
Filling in the brand colour.
Complete
Full, with a confirmation in the value.
Warning
Near a limit, in amber.
Error
Stopped, in red, with a reason nearby.
Accessibility
- role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax.
- It is labelled with aria-labelledby pointing at its visible label.
- Updates are not announced one by one; completion is announced once.
Source
The Line Progress Bar is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block