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.
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.
Screenreader only label
Add a srOnly
prop to hide the label visually.
Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Striped
Uses a gradient to create a striped effect. Not available in IE8.
Animated
Add animated
prop to animate the stripes right to left. Not available in IE9 and below.
Stacked
Nest <ProgressBar />
s to stack them.
API
ProgressBar
import ProgressBar from 'react-bootstrap/ProgressBar'
Copy import code for the ProgressBar component
Name | Type | Default | Description |
---|---|---|---|
animated |
boolean
|
false |
Animate's the stripes from right to left |
children |
onlyProgressBar
|
Child elements (only allows elements of type ) |
|
isChild |
boolean
|
false |
|
label |
node
|
Show label that represents visual percentage. EG. 60% |
|
max |
number
|
100 |
Maximum value progress can reach |
min |
number
|
0 |
Minimum value progress can begin from |
now |
number
|
Current value of progress |
|
srOnly |
boolean
|
false |
Hide's the label visually. |
striped |
boolean
|
false |
Uses a gradient to create a striped effect. |
variant |
'success' | 'danger' | 'warning' | 'info'
|
Sets the background class of the progress bar. |
|
bsPrefix |
string
|
'progress-bar' |
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/progress/