# ProgressBarProps

**Kind:** Interface

Props for the `ProgressBar` component. Also accepts:
* `ProgressBarStyleProps`

## Properties

### `barColor?`

Type: `undefined | string`

A CSS color, such as `#ff9900`. Defaults to a blue color.

### `className?`

Type: `undefined | string`

Extra `className`s to apply to the element, separated by spaces.

### `progress`

Type: `number`

A number between 0 and 1. 0 is 0% complete, 0.5 is 50% complete, 1 is 100% complete. If you include a number outside of the range, the value will be clamped to be inside of the range.

### `style?`

Type: `React.CSSProperties`

Extra styles to apply to the progress bar.

---

## ProgressBar

**Kind:** Component

A progress bar.

```js
import {ProgressBar} from '@airtable/blocks/ui';

function MyComponent() {
    return (
        <ProgressBar
            progress={0.6}
            barColor='#ff9900'
        />
    );
}
```

**Parameters:**
- `props` (`ProgressBarProps`)

**Returns:** `Element`