Progress Bar & Spinners
A progress bar displays progress made through a process, similar to a percentage value. It shows how much of a task has been accomplished and how much remains to be done.
Progress bars can be either determinate (by default) or indeterminate.
- Determinate Progress - Provides users feedback on their progress
- Indeterminate Progress - Relays an unspecified amount of time to complete a process.
Types
Linear
Tracks progress with an animated indicator along a fixed and visible track.
Circular/Spinner
Shows progress by animating a clockwise indicator along an invisible circular track.
Guidelines
Use a progress bar to see the proportion of the task finished at any time. Uploading files or upgrading an application are good examples.
Anatomy: Progress bar
- Track: Indicates the amount of space available to fill with the progress bar.
- Progress bar: The percentage of completion is represented a solid shape/line.
- Value: The percentage of the task that has been completed.
Anatomy: Spinnner
- Track:
- Progress bar:
Do
- Use a progress bar when it will give people feedback in a long-running process with continuous values.
Don't
- Use in order to load content into a module
- Use for indicating distinct steps.