Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Progress Bar
Progress Bar
Horizontal bar indicating the current completion status of a long-running process, usually updated continuously as the process progresses, rather than in small steps.
Uses
How to use
For a long operation or a process that may take a considerable or unknown amount of time.
When the process can be described with quantitative information.
To visually display the progression of a system operation, such as downloading, uploading, loading data, submitting a form or saving updates.
To communicate that data are requested, transferred or processed.
How not to use
When progress is determined by user actions, rather than system actions.
If the process takes less than 5 seconds.
Behaviour
States
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The progress bar component has role="progressbar".
It has the aria-valuenow property set to a decimal value between aria-valuemin and aria-valuemax representing the current value of the counter. Assistive technologies will present aria-valuenow as a percentage.
Has the aria-valuemin property set to a decimal value less than aria-valuemax.
It has the property aria-valuemax set to a decimal value greater than aria-valuemin.
As the progress bar has a visible label, it is referenced by aria-labelledby in the element with role="progressbar".
It has tabindex="0" to make it possible to access it using the tab key or move the focus programmatically.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
