Framework:
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>.
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// or3import CProgress from '@coreui/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 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 } | - |
| 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/react'2// or3import CProgressBar from '@coreui/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 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 } | - |
| value | The percent to progress the ProgressBar. | number | 0 |
| variant | Set the progress bar variant to optional striped. | 'striped' | - |
On this page