Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Basic Usage
<BProgress :value="0" />
<BProgress :value="25" />
<BProgress :value="50" />
<BProgress :value="75" />
<BProgress :value="100" />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 BProgressBar 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-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).
No label
Value label
Progress label
Value label with precision
Progress label with precision
<h5>No label</h5>
<BProgress :value="33.3333" :max="50" />
<h5>Value label</h5>
<BProgress :value="33.3333" :max="50" show-value />
<h5>Progress label</h5>
<BProgress :value="33.3333" :max="50" show-progress />
<h5>Value label with precision</h5>
<BProgress :value="33.3333" :max="50" :precision="2" show-value />
<h5>Progress label with precision</h5>
<BProgress :value="33.3333" :max="50" :precision="2" show-progress />Custom progress label
Need more control over the label? Provide your own label by using the default slot within a BProgressBar sub-component, or by using the label or label-html property on BProgressBar:
Custom label via default slot
Custom label via property
Custom label via property (HTML support)
<h5>Custom label via default slot</h5>
<BProgress :max="50" height="2rem">
<BProgressBar :value="33.333333">
<span>Progress: <strong>{{ (33.333333).toFixed(2) }} / {{ 50 }}</strong></span>
</BProgressBar>
</BProgress>
<h5 class="mt-3">Custom label via property</h5>
<BProgress :max="50">
<BProgressBar
:value="33.333333"
:label="`${((33.333333 / 50) * 100).toFixed(2)}%`"
/>
</BProgress>
<h5 class="mt-3">Custom label via property (HTML support)</h5>
<BProgress :max="50">
<BProgressBar :value="33.333333">
<del>{{33.333333}}</del>
</BProgressBar>
</BProgress>Height
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.
<BProgress :value="25" height="1px" />
<BProgress :value="25" height="20px" />Backgrounds
Use background variants to change the appearance of individual progress bars. The default variant is primary.
<BProgress variant="success" :value="25" />
<BProgress variant="info" :value="50" />
<BProgress variant="warning" :value="75" />
<BProgress variant="danger" :value="100" />Multiple bars
Include multiple BProgressBar sub-components in a BProgress component to build a horizontally stacked set of progress bars.
<BProgress>
<BProgressBar :value="15" />
<BProgressBar :value="30" variant="success" />
<BProgressBar :value="20" variant="info" />
</BProgress>Striped
Set striped to apply a stripe via CSS gradient over the progress bar's background variant.
<BProgress striped :value="10" />
<BProgress striped :value="25" variant="success" />
<BProgress striped :value="50" variant="info" />
<BProgress striped :value="75" variant="warning" />
<BProgress striped :value="100" variant="danger" />Animated stripes
The striped gradient can also be animated by setting the animated prop.
<template>
<BProgress :value="75" striped :animated="animate" />
<BButton class="mt-3" @click="animate = !animate">Toggle animation</BButton>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const animate = ref(false)
</script>Component Reference
<BProgress>| Prop | Type | Default | Description |
|---|---|---|---|
| animated | boolean | undefined | |
| bg-variant | ColorVariant | null | undefined | |
| height | string | undefined | |
| max | Numberish | 100 | |
| precision | Numberish | undefined | |
| show-progress | boolean | undefined | |
| show-value | boolean | undefined | |
| striped | boolean | undefined | |
| text-variant | TextColorVariant | null | undefined | |
| value | Numberish | undefined | |
| variant | ColorVariant | null | undefined |
| Name | Scope | Description |
|---|---|---|
| default |
<BProgressBar>.progress‑bar| Prop | Type | Default | Description |
|---|---|---|---|
| animated | boolean | false | |
| bg-variant | ColorVariant | null | null | |
| label | string | undefined | |
| max | Numberish | undefined | |
| precision | Numberish | 0 | |
| show-progress | boolean | false | |
| show-value | boolean | false | |
| striped | boolean | false | |
| text-variant | TextColorVariant | null | null | |
| value | Numberish | 0 | |
| variant | ColorVariant | null | null |
| Name | Scope | Description |
|---|---|---|
| default |