Bootstrap React Progress

Documentation and examples for using Bootstrap React Progress bars featuring support for stacked bars, animated backgrounds, and text labels.

On this page

Example#

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Basic usage#

1<CProgress className="mb-3">
2    <CProgressBar value={0}/>
3  </CProgress>
4  <CProgress className="mb-3">
5    <CProgressBar value={25}/>
6  </CProgress>
7  <CProgress className="mb-3">
8    <CProgressBar value={50}/>
9  </CProgress>
10  <CProgress className="mb-3">
11    <CProgressBar value={75}/>
12  </CProgress>
13  <CProgress className="mb-3">
14    <CProgressBar value={100}/>
15  </CProgress>

Labels#

Add labels to your progress bars by placing text within the <CProgressBar>.

25%

1<CProgress className="mb-3">
2  <CProgressBar value={25}>25%</CProgressBar>
3</CProgress>

Height#

We only set a height value on the <CProgress>, so if you change that value the inner <CProgressBar> will automatically resize accordingly.

1<CProgress height={1} className="mb-3">
2    <CProgressBar value={25}></CProgressBar>
3  </CProgress>
4  <CProgress height={20} className="mb-3">
5    <CProgressBar value={25}></CProgressBar>
6  </CProgress>

Backgrounds#

Use color prop to change the appearance of individual progress bars.

1<CProgress className="mb-3">
2    <CProgressBar color="success" value={25}/>
3  </CProgress>
4  <CProgress className="mb-3">
5    <CProgressBar color="info" value={50}/>
6  </CProgress>
7  <CProgress className="mb-3">
8    <CProgressBar color="warning" value={75}/>
9  </CProgress>
10  <CProgress className="mb-3">
11    <CProgressBar color="danger" value={100}/>
12  </CProgress>

Multiple bars#

Include multiple progress bars in a progress component if you need.

1<CProgress className="mb-3">
2  <CProgressBar value={15} />
3  <CProgressBar color="success" value={30} />
4  <CProgressBar color="info" value={20} />
5</CProgress>

Striped#

Add variant="striped" to any <CProgressBar> to apply a stripe via CSS gradient over the progress bar's background color.

1<CProgress className="mb-3">
2    <CProgressBar color="success" variant="striped" value={25}/>
3  </CProgress>
4  <CProgress className="mb-3">
5    <CProgressBar color="info" variant="striped" value={50}/>
6  </CProgress>
7  <CProgress className="mb-3">
8    <CProgressBar color="warning" variant="striped" value={75}/>
9  </CProgress>
10  <CProgress className="mb-3">
11    <CProgressBar color="danger" variant="striped" value={100}/>
12  </CProgress>

Animated stripes#

The striped gradient can also be animated. Add animated property to <CProgressBar> to animate the stripes right to left via CSS3 animations.

1<CProgress className="mb-3">
2    <CProgressBar color="success" variant="striped" animated value={25}/>
3  </CProgress>
4  <CProgress className="mb-3">
5    <CProgressBar color="info" variant="striped" animated value={50}/>
6  </CProgress>
7  <CProgress className="mb-3">
8    <CProgressBar color="warning" variant="striped" animated value={75}/>
9  </CProgress>
10  <CProgress className="mb-3">
11    <CProgressBar color="danger" variant="striped" animated value={100}/>
12  </CProgress>

API#

CProgress#

1import { CProgress } from '@coreui/bootstrap-react'
2// or
3import CProgress from '@coreui/bootstrap-react/src/components/progress/CProgress'

Property	Description	Type	Default
animated	Use to animate the stripes right to left via CSS3 animations.	`boolean`	-
className	A string of all className you want applied to the component.	`string`	-
color	Sets the color context of the component to one of Bootstrap React’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
height	Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.	`number`	-
thin	Makes progress bar thinner.	`boolean`	-
value	The percent to progress the ProgressBar (out of 100).	`number`	0
variant	Set the progress bar variant to optional striped.	`'striped'`	-
white	Change the default color to white.	`boolean`	-

CProgressBar#

1import { CProgressBar } from '@coreui/bootstrap-react'
2// or
3import CProgressBar from '@coreui/bootstrap-react/src/components/progress/CProgressBar'

Property	Description	Type	Default
animated	Use to animate the stripes right to left via CSS3 animations.	`boolean`	-
className	A string of all className you want applied to the component.	`string`	-
color	Sets the color context of the component to one of Bootstrap React’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
value	The percent to progress the ProgressBar.	`number`	0
variant	Set the progress bar variant to optional striped.	`'striped'`	-