React Components

# Progress Bar

## Overview

---

## Anatomy

---

ProgressBar

---

## ProgressBar

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [progress attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress#attributes) . |
| 
max

 | `string | number` | - | `100` | The maximum value of the progress bar. |
| 

value

 | `string | number | 'indeterminate'` | - | `0` | The current value of the progress bar |

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-progress-bar-border-radius | var(--ods-theme-border-radius) | 
 |

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { ProgressBar } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <ProgressBar />
}
```

### Max

```jsx
{
  globals: {
    imports: `import { ProgressBar } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <ProgressBar max="500" value="50" />
}
```

### Value

```jsx
{
  globals: {
    imports: `import { ProgressBar } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <ProgressBar value="50" />
}
```

### Indeterminate

```jsx
<ProgressBar value="indeterminate" />
```

## Recipes

---

No recipe defined for now.