Progress Bar

Progress Indicator Design Guidelines.

Determinant

Determinant Progress represents a known amount of time or completeness for a task. A percent prop needs to be passed to render a determinate progress.

Edit the code below to see your changes live!

Indeterminant

Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render an indeterminant progress when missing a percent prop.

Edit the code below to see your changes live!

API

ProgressBar

Prop NameTypeDefaultDescription
percentnumberSets the fill length from 0 to 100.

Props ending with * are required

Beta