Progress

Use our custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels.

Component reference

`<b-progress>`

View source

<b-progress> Properties
<b-progress> Slots

Properties

All property default values are globally configurable.

Property	Type	Default	Description
`animated`	`Boolean`	`false`	Enable the animated background. Also automatically sets 'striped'
`height`	`String`		Override the default height by specifying a CSS height value (including units)
`max`	`Number` or `String`	`100`	Set the maximum value
`precision`	`Number` or `String`	`0`	The number of digits after the decimal to round the value to
`show-progress`	`Boolean`	`false`	Displays the current progress value as a percentage
`show-value`	`Boolean`	`false`	Displays the current progress value
`striped`	`Boolean`	`false`	Enable the striped background
`value`	`Number` or `String`	`0`	The current value of the progress bar
`variant`	`String`		Applies one of the Bootstrap theme color variants to the component

Slots

Name	Description
`default`	Content (progress bars) to place in the progress element

`<b-progress-bar>`

View source

<b-progress-bar> Properties
<b-progress-bar> Slots

Properties

All property default values are globally configurable.

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`animated`	`Boolean`	`null`	Enable the animated background. Also automatically sets 'striped'
`label`	`String`		Text string to explicitly set the label as
`label-html` Use with caution	`String`		HTML string to explicitly set the label as
`max`	`Number` or `String`	`null`	Set the maximum value
`precision`	`Number` or `String`	`null`	The number of digits after the decimal to round the value to
`show-progress`	`Boolean`	`null`	Displays the current progress value as a percentage
`show-value`	`Boolean`	`null`	Displays the current progress value
`striped`	`Boolean`	`null`	Enable the striped background
`value`	`Number` or `String`	`0`	The current value of the progress bar
`variant`	`String`		Applies one of the Bootstrap theme color variants to the component

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

Slots

Name	Description
`default`	Content to place in the progress bar. Overrides the `label`, `label-html`, `show-progress` and `show-value` props

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-progress>`	`BProgress`	`bootstrap-vue`
`<b-progress-bar>`	`BProgressBar`	`bootstrap-vue`

Example:

import { BProgress } from 'bootstrap-vue'
Vue.component('b-progress', BProgress)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`ProgressPlugin`	`bootstrap-vue`

Example:

import { ProgressPlugin } from 'bootstrap-vue'
Vue.use(ProgressPlugin)