Properties
Property | Type | Default Value |
---|---|---|
variant | String | |
striped | Boolean | false |
animated | Boolean | false |
height | String | |
precision | Number | 0 |
show-progress | Boolean | false |
show-value | Boolean | false |
max | Number | 100 |
value | Number | 0 |
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="rendomValue">Click me</b-button>
</div>
</template>
<script>
export default {
data() {
return {
value: 45,
max: 100
}
},
methods: {
rendomValue() {
this.value = Math.random() * this.max
}
}
}
</script>
<!-- b-progress.vue -->
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)
Add labels to your progress bars by either enabling show-progress
(percentage of max) or
show-value
for the current absolute value. You may also set the precision (number of digits after
the decimal) via the precision
prop (default is 0
digits 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 -->
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">
Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong>
</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):
<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>
<b-progress>
will always expand to the maximum with of it's 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 -->
Use background variants to change the appearance of individual progress bars. The default variant is
primary
.
<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 -->
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 -->
The striped gradient can also be animated by setting the animated
prop.
<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:
animated
is true, striped
will automatically be enabled.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>
.Property | Type | Default Value |
---|---|---|
variant | String | |
striped | Boolean | false |
animated | Boolean | false |
height | String | |
precision | Number | 0 |
show-progress | Boolean | false |
show-value | Boolean | false |
max | Number | 100 |
value | Number | 0 |
Property | Type | Default Value |
---|---|---|
value | Number | 0 |
label | String | |
label-html | String | |
max | Number | |
precision | Number | |
variant | String | |
striped | Boolean | |
animated | Boolean | |
show-progress | Boolean | |
show-value | Boolean |
CHANGED in 2.0.0-rc.22 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)
CHANGED in 2.0.0-rc.22 Importing plugins has been simplified.
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
Named Export | Import Path |
---|---|
ProgressPlugin PREFERRED | bootstrap-vue |
ProgressPlugin DEPRECATED | bootstrap-vue/es/components |
default DEPRECATED | bootstrap-vue/es/components/progress |
Example:
// Importing the named export import { ProgressPlugin } from 'bootstrap-vue' Vue.use(ProgressPlugin)