Progress
Progress bars provide users with feedback regarding the duration and progression of a process. Depending on the type used, they can indicate how long a user will be waiting or simply that the system is processing something.
Section titled “ Design”Variants
Section titled “Variants”In Practice
Section titled “ In Practice”- Use a determinate progress bar to indicate the status of an ongoing process whenever the completion percentage is known.
- When a specific completion amount is not known, the indeterminate progress bar can be used.
- For very short process times, use the spinner component.
- When indicating a full page load, use the skeleton loader.
Accessibility
Section titled “ Accessibility”- Always provide an accessible label for progress bars.
- A comprehensive progress bar must have these attributes:
role="progressbar"for progress bar element to define it is the progress bar.aria-valuenow="0"it is the same as<progress value="0">that should be added to the progress bar.aria-valuemin="0"&aria-valuemax="100"like<progress min="0" max="100">
- For more information, see our accessibility guidelines.