# ProgressBar

## Usage <a href="#usage" id="usage"></a>

```jsx
import { ProgressBar } from '@aragon/ui'

const App = () => (
  <ProgressBar value={0.3} />
)
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-044a670f48194ba0d039af07df3fddf78a3c6513%2FSchermata%202022-06-26%20alle%2021.02.03.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `color` <a href="#color" id="color"></a>

* Type: `String`
* Default: `accent` color from `theme`

To change the color of the active bar.

#### `value` <a href="#value" id="value"></a>

* Type: `Number`
* Values: from `0` to `1`, or `-1`.
* Default: `-1`

The value, between `0` and `1`. Set to `-1` for the indeterminate state.

#### `animate` <a href="#animate" id="animate"></a>

* Type: `Boolean`
* Default: `true`

Set this to `false` to disable the animations. Useful to improve the performances if the progress bar is not visible but rendered.