React Progress Component API

Progress API

Explore the API reference for the React Progress component and discover how to effectively utilize its props for customization.

On this page

import { CProgress } from '@coreui/react'
// or
import CProgress from '@coreui/react/src/components/progress/CProgress'

Property	Default	Type
animated#	-	`boolean`
Use to animate the stripes right to left via CSS3 animations.
className#	-	`string`
A string of all className you want applied to the component.
color#	-	`{'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 }`
Sets the color context of the component to one of CoreUI’s themed colors.
height#	-	`number`
Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
progressBarClassName#4.9.0+	-	`string`
A string of all className you want applied to the `<CProgressBar/>` component.
thin#	-	`boolean`
Makes progress bar thinner.
value#	-	`number`
The percent to progress the ProgressBar (out of 100).
variant#	-	`'striped'`
Set the progress bar variant to optional striped.
white#	-	`boolean`
Change the default color to white.

import { CProgressBar } from '@coreui/react'
// or
import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'

Property	Default	Type
animated#	-	`boolean`
Use to animate the stripes right to left via CSS3 animations.
className#	-	`string`
A string of all className you want applied to the component.
color#	-	`{'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 }`
Sets the color context of the component to one of CoreUI’s themed colors.
value#	`0`	`number`
The percent to progress the ProgressBar.
variant#	-	`'striped'`
Set the progress bar variant to optional striped.