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 />| Name | Value |
|---|---|
| Props | |
inline | |
disabled | |
| View | |
Reading direction | |
Default
Default indeterminate progress bar.
template
<cdx-progress-bar />Inline
An inline version is available for use within other components. See Menu for sample usage.
template
<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
html
<!-- Wrapper div with ARIA attributes -->
<div
class="cdx-progress-bar"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
>
<!-- 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>.
html
<div
class="cdx-progress-bar cdx-progress-bar--inline"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
>
<div class="cdx-progress-bar__bar" />
</div>Disabled
For a disabled progress bar, add the cdx-progress-bar--disabled class to the root <div>.
html
<div
class="cdx-progress-bar cdx-progress-bar--disabled"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
>
<div class="cdx-progress-bar__bar" />
</div>html
<div
class="cdx-progress-bar cdx-progress-bar--inline cdx-progress-bar--disabled"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
>
<div class="cdx-progress-bar__bar" />
</div>