Component size, gzipped: 14kb

Progress Bar

API

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

Accessibility

  • ProgressBar has a role="progressbar" and aria-valuenow={number} set.

Examples

Progress bar Basic Usage

Progress bar with Negative Color

Progress bar with Visible Label

0% Loaded

Progress bar with Infinite progress

Progress bar with Custom Label

0mb out of 100mb downloaded

Progress bar with Alternate Success Value

Progress bar with Overrides

API

Progress Bar props

NameTypeDescription
getProgressLabel
function
Can be used to display a custom label for the progress bar.
infinite
boolean
Can be used to show the infinite progress bar.
overrides
custom
Lets you customize all aspects of the component.
showLabel
boolean
Can be used to show the progress bar label.
successValue
number
Can be used to set a custom success value.
value
number
Progess bar value attribute.

Progress Bar exports

You can import this module like so:

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

It exports the following components or utility functions: