Progress
<Progress class="mb-2" :value="50"/>
<Progress class="mb-2" :value="25"/>
<Progress class="mb-2" :value="75"/>
<Progress class="mb-2" :value="60"/>
<Progress class="mb-2" :value="90"/>
1
2
3
4
5
6
2
3
4
5
6
Show Values
To show the current value use prop show-value
Height
We only set a height
value on the <Progress>
, so if you change that value the inner <ProgressBar>
will automatically resize accordingly.
<Progress class="mb-2" height="10px" :value="50"/>
1
2
2
Background Variants
Use bootstrap's color variants.
<Progress class="mb-2" variant="primary" :value="50"/>
<Progress class="mb-2" variant="secondary" :value="25"/>
<Progress class="mb-2" variant="primary" :value="75"/>
<Progress class="mb-2" variant="danger" :value="60"/>
<Progress class="mb-2" variant="success" :value="90"/>
1
2
3
4
5
6
2
3
4
5
6
Multiple bars
<Progress>
<ProgressBar :value="15" :min="0" :max="100"/>
<ProgressBar variant="success" :value="30" :min="0" :max="100"/>
<ProgressBar variant="info" :value="20" :min="0" max="100"/>
</Progress>
1
2
3
4
5
6
2
3
4
5
6
Striped
Use boolean prop striped
to make <ProgressBar>
striped.
<Progress striped class="mb-2" variant="primary" :value="50"/>
<Progress striped class="mb-2" variant="secondary" :value="25"/>
<Progress striped class="mb-2" variant="primary" :value="75"/>
<Progress striped class="mb-2" variant="danger" :value="60"/>
<Progress striped class="mb-2" variant="success" :value="90"/>
1
2
3
4
5
6
2
3
4
5
6
Animated stripes
The striped gradient can also be animated. Use boolean prop animated
along with striped
to make bars animated.
<Progress animated striped class="mb-2" variant="primary" :value="50"/>
<Progress animated striped class="mb-2" variant="secondary" :value="25"/>
<Progress animated striped class="mb-2" variant="primary" :value="75"/>
<Progress animated striped class="mb-2" variant="danger" :value="60"/>
<Progress animated striped class="mb-2" variant="success" :value="90"/>
1
2
3
4
5
6
2
3
4
5
6