Single Bar Charts
A single bar component communicates to the user the progress of a particular process.
Base
Descriptive
Descriptive progress bars include the default .qw-progress element, but are wrapped by a .qw-progress-labeled. Within this wrapper the description and visible value are displayed. The visible value is hidden using aria-hidden="true" so the value is not presented to non-sighted users twice.
Labeled
Visible labels within the progress bars are only allowed on the Large and X-Large progress bars. Labeled progress bars include the default .qw-progress element, but are wrapped by a .qw-progress-labeled.
Hidden labels
Visible labels
Label within
Height
We set height/size on the .qw-progress element via classes: .qw-progress-sm, .qw-progress-lg and .qw-progress-xl. The inner .qw-progress-bar will automatically resize to fit.
Comparisons
In analytics, users often add comparison markers to previous results. As a rule, we only allow markers to be dropped on our .qw-progress-xl heights or larger.
Examples
Colors
Colors are added via class to the .qw-progress-bar element: .qw-progress-bar-primary, .qw-progress-bar-success, qw-progress-bar-warning, and .qw-progress-bar-danger.
Important: Conveying meaning to assistive technologies
Using color only provides a visual indication to the element, and is not conveyed to users of assistive technologies - such as screen readers. If the color change is anything other than decorative, ensure the information denoted by the color is either obvious from the content itself or included through alternative methods, such as text hidden through accessible methods.