How they help
Progress bars visually show the completion status of a task, helping users understand how much is done and what remains. They provide feedback during processes like uploads or form submissions, reducing uncertainty and improving user confidence. This clear indication makes interactions feel more predictable and manageable.
Example of progress bar
Anatomy
- Completed bar
- Segment left to be completed
Visual reference for anatomy
Types
There are 2 types of a progress bar: indeterminate and determinate.
- Indeterminate: use these when it’s not possible to gauge how long something will take. Indeterminate progress bars don’t provide any reassurance that things are still working, so only use them for short tasks.
- Determinate: use these to let users know how much of a task has been completed and how much remains. Use this type whenever possible as it communicates status and assures users things are still working.
Visual reference of types
Designer resources