Progress
Communicate completion, capacity, loading and workflow status with clear visual feedback.
Linear progress
A standard bar for measurable completion.
Project completion64%
Profile setup88%
Storage used42%
Interactive value
Use component state to report an in-progress task.
Exporting data64%
Status progress
Use color carefully to call attention to warning or risk.
Healthy delivery76%
Review required58%
Storage almost full92%
Circular progress
A compact percentage indicator for cards and summaries.
38%
Draft72%
Active94%
CompleteStepped progress
Show users where they are in a short, ordered workflow.
Segmented capacity
Break capacity into categories while preserving the total at a glance.
40%Design files24%Documents18%Media
Indeterminate loading
Use an active bar when the duration is unknown.
Preparing analytics report
In context
Combine progress with a clear value and supporting status.
Q3 product launch
On track34 of 42 tasks completed
Aug 882% completeSep 10
Striped and indeterminate
Use color to communicate active, successful, warning or blocked processes.
Uploading assets68%
Publishing release82%
Reviewing import46%
Retrying backup28%
Syncing project updates
Generating report
Checking deployment
Processing payment
Skeleton loaders
Reserve layout space while the real content is loading.