ProgressBar ​

A ProgressBar is a visual element used to indicate the progress of an action or process.

Guidelines ​

Using 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:

1. Progress bar
   Visual representation of the progress displayed as a filled blue bar.
2. 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" />

inline

aria-label

disabled

Reading direction

Default ​

Default indeterminate progress bar.

<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 ​

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>