Progress

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

<template>
  <div>
    <b-progress :value="value" :max="max" show-progress animated></b-progress>
    <b-progress class="mt-2" :max="max" show-value>
      <b-progress-bar :value="value * (6 / 10)" variant="success"></b-progress-bar>
      <b-progress-bar :value="value * (2.5 / 10)" variant="warning"></b-progress-bar>
      <b-progress-bar :value="value * (1.5 / 10)" variant="danger"></b-progress-bar>
    </b-progress>

    <b-button class="mt-3" @click="randomValue">Click me</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 45,
        max: 100
      }
    },
    methods: {
      randomValue() {
        this.value = Math.random() * this.max
      }
    }
  }
</script>

<!-- b-progress.vue -->

Value

Set the maximum value with the max prop (default is 100), and the current value via the value prop (default 0).

When creating multiple bars in a single process, place the value prop on the individual <b-progress-bar> sub components (see the Multiple Bars section below for more details)

Labels

Add labels to your progress bars by either enabling show-progress (percentage of max) or show-valuefor the current absolute value. You may also set the precision (number of digits after the decimal) via the precision prop (default is 0digits after the decimal).

<template>
  <div>
    <h5>No label</h5>
    <b-progress :value="value" :max="max" class="mb-3"></b-progress>

    <h5>Value label</h5>
    <b-progress :value="value" :max="max" show-value class="mb-3"></b-progress>

    <h5>Progress label</h5>
    <b-progress :value="value" :max="max" show-progress class="mb-3"></b-progress>

    <h5>Value label with precision</h5>
    <b-progress :value="value" :max="max" :precision="2" show-value class="mb-3"></b-progress>

    <h5>Progress label with precision</h5>
    <b-progress :value="value" :max="max" :precision="2" show-progress class="mb-3"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50
      }
    }
  }
</script>

<!-- b-progress-labels.vue -->

Custom progress label

Need more control over the label? Provide your own label by using the default slot within a <b-progress-bar> sub-component, or by using the label or label-html property on <b-progress-bar>:

<template>
  <div>
    <h5>Custom label via default slot</h5>
    <b-progress :max="max" height="2rem">
      <b-progress-bar :value="value">
        <span>Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong></span>
      </b-progress-bar>
    </b-progress>

    <h5 class="mt-3">Custom label via property</h5>
    <b-progress :max="max">
      <b-progress-bar :value="value" :label="`${((value / max) * 100).toFixed(2)}%`"></b-progress-bar>
    </b-progress>

    <h5 class="mt-3">Custom label via property (HTML support)</h5>
    <b-progress :max="max">
      <b-progress-bar :value="value" :label-html="`<del>${value}</del>`"></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50
      }
    }
  }
</script>

<!-- b-progress-custom-labels.vue -->

Precedence order for label methods (top-most has precedence):

default slot of <b-progress-bar>
label prop of <b-progress-bar>
show-progress prop of <b-progress-bar>
show-value prop of <b-progress-bar>
show-progress prop of <b-progress>
show-value prop of <b-progress>
no label

Width and height

<b-progress> will always expand to the maximum with of its parent container. To change the width, place <b-progress> in a standard Bootstrap column or apply one of the standard Bootstrap width classes.

<template>
  <div>
    <h5>Default width</h5>
    <b-progress :value="value" class="mb-3"></b-progress>

    <h5>Custom widths</h5>
    <b-progress :value="value" class="w-75 mb-2"></b-progress>
    <b-progress :value="value" class="w-50 mb-2"></b-progress>
    <b-progress :value="value" class="w-25"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75
      }
    }
  }
</script>

<!-- b-progress-width.vue -->

The height of the progress bar can be controlled with the height prop. The height value should be a standard CSS dimension (px, rem, em, etc.). The default height is 1rem.

<template>
  <div>
    <h5>Default height</h5>
    <b-progress :value="value" show-progress class="mb-3"></b-progress>

    <h5>Custom heights</h5>
    <b-progress height="2rem" :value="value" show-progress class="mb-2"></b-progress>
    <b-progress height="20px" :value="value" show-progress class="mb-2"></b-progress>
    <b-progress height="2px" :value="value"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75
      }
    }
  }
</script>

<!-- b-progress-height.vue -->

Backgrounds

Use background variants to change the appearance of individual progress bars. The default variant is primary.

Solid background variants

<template>
  <div>
    <div v-for="bar in bars" class="row mb-1">
      <div class="col-sm-2">{{ bar.variant }}:</div>
      <div class="col-sm-10 pt-1">
        <b-progress :value="bar.value" :variant="bar.variant" :key="bar.variant"></b-progress>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bars: [
          { variant: 'success', value: 75 },
          { variant: 'info', value: 75 },
          { variant: 'warning', value: 75 },
          { variant: 'danger', value: 75 },
          { variant: 'primary', value: 75 },
          { variant: 'secondary', value: 75 },
          { variant: 'dark', value: 75 }
        ],
        timer: null
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.bars.forEach(bar => (bar.value = 25 + Math.random() * 75))
      }, 2000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>

<!-- b-progress-backgrounds.vue -->

Striped backgrounds

Set striped to apply a stripe via CSS gradient over the progress bar's background variant.

<template>
  <div>
    <b-progress :value="25" variant="success" :striped="striped"></b-progress>
    <b-progress :value="50" variant="info" :striped="striped" class="mt-2"></b-progress>
    <b-progress :value="75" variant="warning" :striped="striped" class="mt-2"></b-progress>
    <b-progress :value="100" variant="danger" :striped="striped" class="mt-2"></b-progress>

    <b-button variant="secondary" @click="striped = !striped" class="mt-3">
      {{ striped ? 'Remove' : 'Add' }} Striped
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        striped: true
      }
    }
  }
</script>

<!-- b-progress-striped.vue -->

Animated backgrounds

The striped gradient can also be animated by setting the animatedprop.

<template>
  <div>
    <b-progress :value="25" variant="success" striped :animated="animate"></b-progress>
    <b-progress :value="50" variant="info" striped :animated="animate" class="mt-2"></b-progress>
    <b-progress :value="75" variant="warning" striped :animated="animate" class="mt-2"></b-progress>
    <b-progress :value="100" variant="danger" :animated="animate" class="mt-3"></b-progress>

    <b-button variant="secondary" @click="animate = !animate" class="mt-3">
      {{ animate ? 'Stop' : 'Start' }} Animation
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        animate: true
      }
    }
  }
</script>

<!-- b-progress-animated.vue -->

Notes:

if animated is true, striped will automatically be enabled.
Animated progress bars don't work in Opera 12 — as they don't support CSS3 animations.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation for additional details.

Multiple bars

Include multiple <b-progress-bar> sub-components in a <b-progress> component to build a horizontally stacked set of progress bars.

<template>
  <div>
    <b-progress :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress show-progress :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress show-value striped :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress :max="max">
      <b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        values: [15, 30, 20],
        max: 100
      }
    }
  }
</script>

<!-- b-progress-multiple.vue -->

<b-progress-bar> will inherit most of the props from the <b-progress> parent component, but you can override any of the props by setting them on the <b-progress-bar>

Notes:

height, if specified, should always set on the <b-progress> component.
<b-progress-bar> will not inherit value from <b-progress>.

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)