
```jsx
import { CProgress } from '@coreui/react'
// or
import 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'` \| `string` | - |
| **height** | Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. | `number` | - |
| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `<CProgressBar/>` component. | `string` | - |
| **thin** | Makes progress bar thinner. | `boolean` | - |
| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - |
| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - |
| **white** | Change the default color to white. | `boolean` | - |
