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}

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
aria-label
string
Aria-label attribute
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.
maxValue
The biggest value allowed.
minValue
The smallest value allowed.
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.
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: