# 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