Component size, gzipped: 17kb

Progress Bar

API

Indicates a wait time for actions - either within an experience flow or loading data.

Accessibility

  • The progress bar always sets role="progressbar"
  • When infinite is false (the progress bar is determinate), these determinate aria tags are set:

    • aria-valuenow={value}
    • aria-valuemin={0}
    • aria-valuemax={100}
  • It's important to normalize the value in the range 0 - 100 to properly support screen-reader users. You can apply this formula:

    • (value - MIN) * 100 / (MAX - MIN)

Examples

Progress bar Basic Usage

Progress bar with Negative Color

Progress bar with Visible Label

0% Loaded

Progress bar with Custom Label

0mb out of 1000mb downloaded

Progress bar with Overrides

Progress bar rounded

There also is a rounded version of the progress bar

Basic Usage

0%

API

Progress Bar props

NameTypeDescription
errorMessage
Error message for screen-reader users.
getProgressLabel
Can be used to display a custom label for the progress bar.
infinite
Can be used to show the infinite progress bar.
overrides
Lets you customize all aspects of the component.
showLabel
Can be used to show the progress bar label.
size
Renders component in provided size.
steps
Defines how many steps the progress bar has. Defaults to 1.
successValue
A custom completion value. Will be removed in v11.
value
Progress bar value attribute normalized in the 0 to 100 range.

Progress Bar exports

You can import this module like so:

import {ProgressBar} from 'baseui/progress-bar'

It exports the following components or utility functions: