Components/Feedback
Progress Bar
Progress bars show how much of a task is done, so people know it’s working and roughly how long is left
Playground
Drag the value or start a fake upload, it runs to 100% and lands on Success
Bar indicator
The bare bar, in 10% steps in the DS. Use it on its own inside cards, rows and file items
Bar-indicators0%25%50%75%100%
States
On Progress shows the value and a spinning icon. Success and Error fill the bar with the result color
On Progress
Uploading report.pdf62%62 MB of 100 MB
Success
Uploading report.pdf100%100 MB of 100 MB
Error
Uploading report.pdf100%Upload failed, check your connection and try again
Circular
For compact spots like a dashboard tile or an avatar, three sizes in 25% steps
Circural-progress-bar800%25%50%75%100%640%25%50%75%100%480%25%50%75%100%
When to use
Use when
- A task takes more than a second or two, like an upload or export
- You know how much is done, so the value means something
- People can keep working while it runs
Avoid when
- You can’t measure progress, show a spinner instead
- The task has named steps people move through, use a Stepper
- It finishes almost instantly, show the result
Do and don’t
Uploading report.pdf100%Upload failed, check your connection and try again
Say what’s happening and how much is left, and turn the bar red with a reason if it fails
Uploading report.pdf100%
Don’t leave a failed task at a full blue bar, people will think it worked
Tokens and specs
PropertyTokenValue
Track#EBEBEB, 6 px high, fully rounded
Fill#1868D0
Fill, success#1FC16B
Fill, error#FB3748
Width—400 px, or fill the container
Label to bar to info8 px
TitleInter Medium 12/16
PercentageInter Regular 12/16, 12 px icon
Loading icon#A3A3A3
InfoInter Regular 10/12, state/error/base on error
Circular sizes—80 / 64 / 48 px, ring 10% of the size
Circular track#F7F7F7
Circular fill#335CFF
Circular valueInter Regular 14/20, 12/16, 10/12