CodexProgressBar
A linear indicator of progress.
Currently only supports indeterminate type (i.e. the bar will scroll across the width of the display and then reappear at the start, rather than reflecting a specific amount of progress having been made).
A smaller, inline version is available for use within other components, e.g. a menu or dialog.
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" />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>