# Progress Bar
ProgressBar component is simple progress indicator element.
# Static progress bar
Not animated static version of progress bar is available out of the box. Simply provide progress prop as a number between 0 and 100
which will determine the value of progress bar in percent and choose one of the theme colors for type prop
<ProgressBar :progress="progress.default" type="default" />
<ProgressBar :progress="progress.primary" type="primary" />
<ProgressBar :progress="progress.secondary" type="secondary" />
<ProgressBar :progress="progress.success" type="success" />
<ProgressBar :progress="progress.warning" type="warning" />
<ProgressBar :progress="progress.danger" type="danger" />
<ProgressBar :progress="progress.light" type="light" />
# Striped animated version
If you wish to have progress bar striped simply provide prop striped, and if you also want to have it animated, use animated prop
<ProgressBar animated striped :progress="progress.default" type="default" />
<ProgressBar animated striped :progress="progress.primary" type="primary" />
<ProgressBar animated striped :progress="progress.secondary" type="secondary" />
<ProgressBar animated striped :progress="progress.success" type="success" />
<ProgressBar animated striped :progress="progress.warning" type="warning" />
<ProgressBar animated striped :progress="progress.danger" type="danger" />
<ProgressBar animated striped :progress="progress.light" type="light" />
# Props
| name | default | description | required | type |
|---|---|---|---|---|
| progress | Progress of progress bar in %. | true | Number | |
| label | Label for progress bar. Will be placed inside progress area. | false | String | |
| type | primary | One of available bootstrap button types: primary, default, success, info, warning, danger | false | String |
| striped | false | If provided as true, .progress-bar-striped class will be added. | false | Boolean |
| animated | false | If provided as true, .progress-bar-animated class will be added. | false | Boolean |