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

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cprogress-animated">
        <td className="text-primary fw-semibold">animated<a href="#cprogress-animated" aria-label="CProgress animated permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Use to animate the stripes right to left via CSS3 animations.</p>
        </td>
      </tr>
      <tr id="cprogress-class-name">
        <td className="text-primary fw-semibold">className<a href="#cprogress-class-name" aria-label="CProgress className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the component.</p>
        </td>
      </tr>
      <tr id="cprogress-color">
        <td className="text-primary fw-semibold">color<a href="#cprogress-color" aria-label="CProgress color permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
        </td>
      </tr>
      <tr id="cprogress-height">
        <td className="text-primary fw-semibold">height<a href="#cprogress-height" aria-label="CProgress height permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the height of the component. If you set that value the inner <code>{`<CProgressBar>`}</code> will automatically resize accordingly.</p>
        </td>
      </tr>
      <tr id="cprogress-progress-bar-class-name">
        <td className="text-primary fw-semibold">progressBarClassName<a href="#cprogress-progress-bar-class-name" aria-label="CProgress progressBarClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the <code>{`<CProgressBar/>`}</code> component.</p>
        </td>
      </tr>
      <tr id="cprogress-thin">
        <td className="text-primary fw-semibold">thin<a href="#cprogress-thin" aria-label="CProgress thin permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Makes progress bar thinner.</p>
        </td>
      </tr>
      <tr id="cprogress-value">
        <td className="text-primary fw-semibold">value<a href="#cprogress-value" aria-label="CProgress value permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The percent to progress the ProgressBar (out of 100).</p>
        </td>
      </tr>
      <tr id="cprogress-variant">
        <td className="text-primary fw-semibold">variant<a href="#cprogress-variant" aria-label="CProgress variant permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'striped'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set the progress bar variant to optional striped.</p>
        </td>
      </tr>
      <tr id="cprogress-white">
        <td className="text-primary fw-semibold">white<a href="#cprogress-white" aria-label="CProgress white permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Change the default color to white.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
