跳到主要内容

Progress bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Example

Default progress bar.

结果
Loading...
实时编辑器

With label

Add a label prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

结果
Loading...
实时编辑器

Screenreader only label

Add a visuallyHidden prop to hide the label visually.

结果
Loading...
实时编辑器

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

结果
Loading...
实时编辑器

Striped

Uses a gradient to create a striped effect.

结果
Loading...
实时编辑器

Animated

Add animated prop to animate the stripes right to left.

结果
Loading...
实时编辑器

Stacked

Nest <ProgressBar />s to stack them.

结果
Loading...
实时编辑器

API

ProgressBar