ProgressBar

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

<cdx-progress-bar aria--label="ProgressBar example" />

Name	Value
Props
inline
aria-label
disabled
View
Reading direction	Left to right (LTR) Right to left (RTL)

Overview

When to use ProgressBar

Use a ProgressBar when you want to provide real-time feedback on the progress of ongoing operations, such as file uploads or form submissions. There are different types of ProgressBars, depending on your intended use.

1. Default ProgressBar indicates that the ongoing system process will affect an entire view or page area.
2. Inline ProgressBar is available to indicate progress within other components, such as Menu or Dialog.

Avoid using a ProgressBar if the progress of a task is not crucial to user understanding or if the task is expected to complete quickly.

About ProgressBar

ProgressBar includes the following elements.

Progress element

Visual representation of the progress displayed as a filled blue bar.

Bar container

Background container that holds the progress bar.

Examples

Basic usage

<cdx-progress-bar aria-label="Indeterminate progress bar" />

WARNING

Due to the lack of descriptive text, a default ProgressBar requires one of the following attributes: aria-label or aria-hidden.

The aria-label attribute must be applied to the ProgressBar to ensure it is accessible to assistive technology users. An exception is an inline ProgressBar used within another component, such as the Menu component, where they are excluded from the accessibility tree by adding aria-hidden attribute.

Inline

An inline version is available for use within other components. See Menu for sample usage.

<cdx-progress-bar :inline="true" />

Technical implementation

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 ProgressBar, 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 ProgressBar, 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>