React Progress Component

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

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/react'
2// or
3import CProgress from '@coreui/react/src/components/progress/CProgress'
PropertyDescriptionTypeDefault
animatedUse to animate the stripes right to left via CSS3 animations.boolean-
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string }-
heightSets the height of the component. If you set that value the inner <CProgressBar> will automatically resize accordingly.number-
thinMakes progress bar thinner.boolean-
valueThe percent to progress the ProgressBar (out of 100).number0
variantSet the progress bar variant to optional striped.'striped'-
whiteChange the default color to white.boolean-

CProgressBar#

1import { CProgressBar } from '@coreui/react'
2// or
3import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
PropertyDescriptionTypeDefault
animatedUse to animate the stripes right to left via CSS3 animations.boolean-
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string }-
valueThe percent to progress the ProgressBar.number0
variantSet the progress bar variant to optional striped.'striped'-