A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.
ts
| Guidance | Practices |
|---|---|
| Do | Use a determinate bar when the total amount of work is known, and indeterminate when it's not. |
| Do | Choose a color variant that matches the context: accent for general progress, success for completion, warning or error for alerts. |
| Do | Always provide a label, even if hidden; screen readers need it to announce what's loading. |
| Don't | Place icons or labels inside the bar; compose them alongside it using layout components. |
| Don't | Use a progress bar for instant actions; it's meant for operations that take noticeable time. |
| Don't | Use multiple progress bars stacked together for the same operation; use one bar with a value label instead. |
Progress bar with a custom value label showing disk usage in GB.
Indeterminate progress bar for operations with unknown duration.