Basic

A simple progress bar with a label and percentage value.

Export data45%

Sizes

Use the size prop to control the progress bar height. Available sizes are sm, md, and lg.

Small30%

Medium60%

Large80%

Without Label

Omit the label prop for a minimal progress bar when context is provided elsewhere.

65%

Without Value

Use showValue={false} to hide the percentage when exact progress is less important than visual feedback.

Processing...

Indeterminate

Set value={null} to show an indeterminate progress bar when the total progress is unknown.

Loading...

Interactive

An interactive example demonstrating controlled progress state.

Uploading files...20%

Reset

States

Common progress states from not started to completion.

Not started0%

In progress25%

Completed100%

Indeterminate