wovoui

Progress

50%
25%
75%
60%
90%

<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

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.

50%

<Progress class="mb-2" height="10px" :value="50"/>
1
2

Background Variants

Use bootstrap's color variants.

50%
25%
75%
60%
90%

<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

Multiple bars

15%
30%
20%

<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

Striped

Use boolean prop striped to make <ProgressBar> striped.

50%
25%
75%
60%
90%

<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

Animated stripes

The striped gradient can also be animated. Use boolean prop animated along with striped to make bars animated.

50%
25%
75%
60%
90%

<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