---
name: ProgressBar
menu: Components
route: /components/progressBar
---

import { Playground, Props } from 'docz';
import ProgressBar from "./";
import { Callout } from '../../index.components'

# ProgressBar

## Import
`import { ProgressBar } from '@blasterjs/core'`

## Basic Usage

Displays a fractional amount of progress towards some end.

<Playground>
  <ProgressBar value={25} max={100} />
</Playground>

## Striped and animated
Use the `striped` and `animated` prop to change the default appearance and show motion.

<Playground>
  <ProgressBar
    value={25}
    max={100}
    striped
    animated
  />
</Playground>

<Callout icon="info">
    Animated has no visual effect unless striped is present
</Callout>

## Styling

<Playground>
  <ProgressBar
    value={25}
    max={100}
    striped
    animated
    color="greenShade"
    bg="greenTint"
  />
</Playground>

### ProgressBar PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| value | number | no | `0` | current progress value |
| max | number | no | `0` | max progress value |
| color | string | no | `primary`  | fill color |
| bg | string | no | `gray200` | track color |
| striped | boolean | no | false | |
| animated | boolean | no | false | animates when striped |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |

## Theming

### Schema
```
{
  colors: {
    bg,
    color,
  },
  radii: {
    borderRadius
  },
  sizes: {
    height
  },
  overrides: {
    backBar: css``,
    topBar: css``
  }
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/progressBar/index.js)
- [Learn more about themeing](/blaster-theme)