# Progress extension

USWDS does not provide a progess bar, so here we extend and provide a simple progress bar. For accesability, the relevant aria values are automatically set for screen reader support. These are aria-valuemin, aria-valuemax and aria-valuenow. The role is also set as role="progressbar".

46%

    <us-progress :value="val" show-progress striped animated :max="100"/>

# Labels

Add labels to your progress bars by either enabling show-progress (percentage of max) or show-value for the current absolute value. You can also make use of the default slot to add any content into the bar you want. The default slot is also passed the max, min, value and percent values for convenience. For example;

See my Progress!

46% Max: 100, Min: 0, Value: 46

<div class="mt-3 mb-3">
    <!-- Example using the default slot -->
    <us-progress :value="val" show-progress striped animated :max="100" height="25px">
        <us-tag variant="info">See my Progress!</us-tag>
    </us-progress>
    <!-- Example getting the internal props -->
    <us-progress :value="val" show-progress striped animated :max="100" height="25px" class="mt-2">
        <template #default="{max, min, value, percent}">
            <div>
                <us-tag variant="info">{{percent}}%</us-tag>
                <span class="text-small text-white">Max: {{max}}, Min: {{min}}, Value: {{value}}</span>
            </div>
        </template>    
    </us-progress>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Maximum and minimium

The default max is 100 and min is 0.

Max: 100, Min: 100, Value: -50

Max: 100, Min: -100, Value: 0

Max: 100, Min: -100, Value: 50

84% (Max: 500, Min: 250, Value: 460)

<div class="mt-3 mb-3">
    <us-progress :value="-50" class="mb-2" show-progress :max="100" :min="-100">
        Max: 100, Min: 100, Value: -50
    </us-progress>
    <us-progress :value="0" class="mb-2" show-progress :max="100" :min="-100">
        Max: 100, Min: -100, Value: 0
    </us-progress>
    <us-progress :value="50" show-progress :max="100" :min="-100">
        Max: 100, Min: -100, Value: 50
    </us-progress>
</div>

<div class="mt-3 mb-3">
    <us-progress :value="460" class="mb-2" show-progress :max="500" :min="250">
        <template #default="{max, min, value, percent}">
            {{percent}}% (Max: {{max}}, Min: {{min}}, Value: {{value}})
        </template>
    </us-progress>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Width and height

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

Default width

Custom widths

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.

Default height

90%

Custom heights

30%

# Variants

The usual variants are supported, and also allow for striped and animated.

primary

59%

secondary

75%

info

22%

success

33%

danger

59%

warning

17%

light

75%

dark

17%

white

78%

black

48%

<div class="mt-3 mb-3">
    <us-row 
        v-for="(variant,index) in [
                'primary',
                'secondary',
                'info',
                'success',
                'danger',
                'warning',
                'light',
                'dark',
                'white',
                'black'
            ]" 
        :key="index"
    >
        <us-col md="1">
            {{variant}}
        </us-col>
        <us-col>
            <us-progress :value="randomVal()" class="mb-3" show-progress :variant="variant"/>
        </us-col>
    </us-row>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Component Reference

# `<us-progress>`

# Properties

Property	Type	Default	Description
variant	string	primary	Applies one of the contextual color variants
value	number	0	The progress bar value, must be between min and max
min	number	0	The min value for the bar
max	number	100	The max value for the bar
striped	boolean	false	Render as a striped bar
animated	boolean	false	Animate the stripes
show-percent	boolean	false	Show the percentage value in the bar
show-value	boolean	false	Show the raw value in the bar
height	string	number	1rem

# Slots

Slot Name	Props	Description
default	value	The current raw value
	max	The max value set
	min	The min value set
	percent	The computed percentage value of the bar

← Modal Step Indicator →