FEEDBACK / COMPONENTS
Progress
Show completion without guessing.
About progress
Progress is a visual indicator often seen in software interfaces, showing the status and completion of a task through a gradually filling horizontal or circular bar. It provides users with a quick and intuitive way to track the progress of ongoing operations.
Anatomy
Shared parts, named consistently.
- 1IndicatorRequired
Indicates how much the progress has been made.
- 2Label
The text describes the process that the Progress refers to. The label can be visually hidden, but must be defined in order to be accessible.
- 3Value label
The label to indicate the overall progress value.
- 4TrackRequired
The static area that the bar indicator moves on top of and acts as a fixed visual reference of what the total length and duration of the progress could be.
- 5Helper text (optional, except for error)
Additional context to provide to the user about the progress. When Progress reaches an error state it must convey the error reason in the helper text slot.
Try the default
A working example with the shared V1 visual language.
When to use
Show a percentage only when total work is known. Omit value for an indeterminate operation; retain a meaningful label.
Native progress exposes its label and value; it is not a keyboard stop.