Edit this page
[?] Component size, gzipped: 23kb

ProgressBar

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 Custom Label

0mb out of 100mb downloaded

Progress bar with Alternate Success Value

Progress bar with Overrides

Overrides

Additionally, you can fully customize any part of the ProgressBar through the overrides prop. The ProgressBar consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

60% Loaded

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

ProgressBar API

children Node

Node

getProgressLabel function = (value, successValue) => undefined

The function that returns a progress bar label to display.

number, number => Node

value number = 0

The value between 0 and 100 | successValue of the progress indicator.

successValue number = 100

A custom completion value.

showLabel boolean = false

If set to false, label is hidden and getProgressLabel is ignored.

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Bar { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
BarProgress { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Label { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

Progress Bar exports

You can import this module like so:

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

It exports the following components or utility functions:

  • ProgressBar
  • StyledRoot
  • StyledBar
  • StyledBarProgress
  • StyledLabel