ProgressBar ​
A ProgressBar is a visual element used to indicate the progress of an action or process.
Guidelines ​
When to use progress bars ​
Use a ProgressBar when you want to provide real-time feedback on the progress of ongoing operations, such as file uploads or form submissions.
If the progress of a task is not crucial to user understanding or if the task is expected to complete quickly, avoid using a ProgressBar.
Specifications ​
Progress bars include the following elements:
- Progress bar
Visual representation of the progress displayed as a filled blue bar. - Bar container
White container that holds the progress bar.
Types ​
There are different types of progress bars, depending on your intended use.
Default progress bar ​
Elevated progress bar to indicate that the ongoing system process will affect an entire view or page area.
Inline progress bar ​
An inline and smaller version of the progress bar is available to indicate progress within other components, such as Menu or Dialog.
Interaction states ​
Indeterminate progress bars are always in motion and cannot be in an empty, completed, or disabled state.
Demos ​
Configurable ​
<cdx-progress-bar aria--label="ProgressBar example" />
Name | Value |
---|---|
Props | |
inline | |
aria-label | |
disabled | |
View | |
Reading direction |
Default ​
Default indeterminate progress bar.
WARNING
Due to the lack of descriptive text, default progress bars require one of the following attributes: aria-label
or aria-hidden
.
The attribute aria-label
has to be used on progress bars to be understandable by assistive technology users. Exceptions are inline progress bars in component combinations, e.g. in the Menu component, that are skipped by adding aria-hidden
.
<cdx-progress-bar aria-label="Indeterminate progress bar" />
Inline ​
An inline version is available for use within other components. See Menu for sample usage.
<cdx-progress-bar :inline="true" />
Vue usage ​
Props ​
Prop name | Description | Type | Default |
---|---|---|---|
inline | Whether this is the smaller, inline variant. | boolean | false |
disabled | Whether the progress bar is disabled. | boolean | false |
CSS-only version ​
Markup structure ​
<!-- Wrapper div with ARIA attributes -->
<div
class="cdx-progress-bar"
role="progressbar"
aria-label="ProgressBar example"
>
<!-- Empty inner div -->
<div class="cdx-progress-bar__bar" />
</div>
Inline ​
For an inline progress bar, add the cdx-progress-bar--inline
class to the root <div>
.
<div class="cdx-progress-bar cdx-progress-bar--inline" role="progressbar">
<div class="cdx-progress-bar__bar" />
</div>
Disabled ​
For a disabled progress bar, add the cdx-progress-bar--disabled
class to the root <div>
.
<div class="cdx-progress-bar cdx-progress-bar--disabled" role="progressbar">
<div class="cdx-progress-bar__bar" />
</div>
<div
class="cdx-progress-bar cdx-progress-bar--inline cdx-progress-bar--disabled"
role="progressbar"
>
<div class="cdx-progress-bar__bar" />
</div>