Progress

Wrapper around Bulma / Native HTML progress bars

20
40

40

80%

80%

<template>
    <section>
        <b-progress></b-progress>

        <b-progress :value="20"></b-progress>

        <b-progress :value="40" show-value></b-progress>

        <b-progress :value="80" show-value format="percent"></b-progress>
    </section>
</template>

# Types

20

20

40

40

60

60

80

80

100

100

<template>
    <section>
        <b-progress :value="20" show-value></b-progress>

        <b-progress type="is-danger" :value="40" show-value></b-progress>

        <b-progress type="is-success" :value="60" show-value></b-progress>

        <b-progress type="is-info" :value="80" show-value></b-progress>

        <b-progress type="is-warning" :value="100" show-value></b-progress>
    </section>
</template>

# Sizes

<template>
    <section>
        <b-progress size="is-small"></b-progress>

        <b-progress></b-progress>

        <b-progress size="is-medium"></b-progress>

        <b-progress size="is-large"></b-progress>
    </section>
</template>

# Values

80,500

80,500

<template>
    <section>
        <div class="block">
            <b-switch v-model="indeterminate"> Indeterminate </b-switch>
            <b-field label="Type and Size">
                <b-field grouped>
                    <b-select v-model="type" placeholder="Type">
                        <option value="null">Default</option>
                        <option value="is-primary">Primary</option>
                        <option value="is-success">Success</option>
                        <option value="is-warning">Warning</option>
                        <option value="is-danger">Danger</option>
                    </b-select>
                    <b-select v-model="size" placeholder="Size">
                        <option value="null">Default</option>
                        <option value="is-small">Small</option>
                        <option value="is-medium">Medium</option>
                        <option value="is-large">Large</option>
                    </b-select>
                </b-field>
            </b-field>
            <b-switch v-model="showValue"> Show Value </b-switch>
            <b-switch v-model="keepTrailingZeroes" :disabled="!showValue"> Keep Trailing Zeroes </b-switch>
            <b-field label="Format and Precision">
                <b-field>
                    <b-select v-model="format" :disabled="!showValue">
                        <option value="raw">Raw</option>
                        <option value="percent">Percent</option>
                    </b-select>
                    <b-numberinput v-model="precision" :disabled="!showValue" controls-position="compact" />
                </b-field>
            </b-field>
            <b-field label="Locale">
                <b-select v-model="locale" :disabled="!showValue">
                    <option :value="undefined"></option>
                    <option value="de-DE">de-DE</option>
                    <option value="en-CA">en-CA</option>
                    <option value="en-GB">en-GB</option>
                    <option value="en-US">en-US</option>
                    <option value="es-ES">es-ES</option>
                    <option value="es-MX">es-MX</option>
                    <option value="fr-CA">fr-CA</option>
                    <option value="fr-FR">fr-FR</option>
                    <option value="it-IT">it-IT</option>
                    <option value="ja-JP">ja-JP</option>
                    <option value="pt-BR">pt-BR</option>
                    <option value="ru-RU">ru-RU</option>
                    <option value="zn-CN">zn-CN</option>
                </b-select>
            </b-field>
        </div>

        <b-progress
            :type="type"
            :size="size"
            :max="100000"
            :value="indeterminate ? undefined : 80500"
            :show-value="showValue"
            :format="format"
            :precision="precision"
            :keep-trailing-zeroes="keepTrailingZeroes"
            :locale="locale"></b-progress>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                indeterminate: false,
                type: null,
                size: 'is-medium',
                showValue: true,
                format: 'raw',
                precision: 2,
                keepTrailingZeroes: false,
                locale: undefined // Browser locale
            }
        }
    }
</script>

# Slot

There is also a default slot if you want to display anything you want inside the progress bar.

75

Custom display with HTML

75

75 / 100

75

3 out of 4

<template>
    <section>
        <b-progress :value="75" size="is-medium" show-value>
            Custom display with <span style="color: red">HTML</span>
        </b-progress>
        <b-progress :value="75" size="is-medium" show-value>
            75 / 100
        </b-progress>
        <b-progress :value="75" size="is-medium" show-value>
            3 out of 4
        </b-progress>
    </section>
</template>

# Multiple bars

You can also include multiple progress bars in a progress component if you need.

* This will not use the native progress element.

12.5%

25%

37.5%

10

20

Wow!

10

20

<template>
    <section>
        <b-progress format="percent" :max="80">
            <b-progress-bar slot="bar" :value="10" show-value></b-progress-bar>
            <b-progress-bar slot="bar" :value="20" type="is-primary" show-value></b-progress-bar>
            <b-progress-bar slot="bar" :value="30" type="is-warning" show-value></b-progress-bar>
        </b-progress>
        <b-progress size="is-medium" type="is-success" show-value>
            <b-progress-bar slot="bar" :value="10"></b-progress-bar>
            <b-progress-bar slot="bar" :value="20" type="is-primary"></b-progress-bar>
            <b-progress-bar slot="bar" :value="30" type="is-warning">Wow!</b-progress-bar>
        </b-progress>
        <b-progress size="is-large">
            <b-progress-bar slot="bar" :value="10" show-value></b-progress-bar>
            <b-progress-bar slot="bar" :value="20" type="is-primary" show-value></b-progress-bar>
            <b-progress-bar slot="bar" :value="30" type="is-warning"></b-progress-bar>
        </b-progress>
    </section>
</template>

# API

Progress

Name
Description
Type
Values
Default
typeType (color) of the progress bar, optionalStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-darkgrey
sizeSize of the progress bar, optionalStringis-small, is-medium, is-large
valueThe progress value, progress will be indeterminate if undefined.Number
maxThe maximum value for the progress bar.Number100
show-valueIf the value should be displayed inside the progress bar.Booleanfalse
formatWhich format should be used to display the value (if show-value is true). The value will be displayed as-is if using raw. The percent using value and max will be calculated and displayed if using percentStringraw, percentraw
precisionHow many decimals should be displayed.Number2
keep-trailing-zeroesTruncate or not the trailing zeroesBooleantrue
localeAccept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifierString, Array of Stringundefined: default to browser locale.

Bar

Name
Description
Type
Values
Default
typeType (color) of the progress bar, optionalStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassinherited from parent
valueThe progress value.Number
show-valueIf the value should be displayed inside the progress bar.Booleaninherited from parent

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub