Progressbar

Native HTML progress bars

The progress bar is a simple CSS class that styles the native <progress> HTML element.

15%

<progress class="progress" value="15" max="100">
    15%
</progress>

Colors

The progress bar element is available in all the different colors defined by the $colors Sass map.

15% 30% 45% 60% 75% 90%

<progress class="progress is-primary" value="15" max="100">
    15%
</progress>
<progress class="progress is-mix" value="30" max="100">
    30%
</progress>
<progress class="progress is-info" value="45" max="100">
    45%
</progress>
<progress class="progress is-success" value="60" max="100">
    60%
</progress>
<progress class="progress is-warning" value="75" max="100">
    75%
</progress>
<progress class="progress is-danger" value="90" max="100">
    90%
</progress>

Sizes

15% 30% 45% 60%

<progress class="progress is-small" value="15" max="100">
    15%
</progress>
<progress class="progress is-mix" value="30" max="100">
    30%
</progress>
<progress class="progress is-medium" value="45" max="100">
    45%
</progress>
<progress class="progress is-large" value="60" max="100">
    60%
</progress>

Indeterminate

If you don't set the HTML value attribute, you can display an indeterminate progress bar. It's used to show that some progress is going on, but the actual duration is not yet determined.

15% 30% 45% 60%

<progress class="progress is-small is-primary" max="100">
    15%
</progress>
<progress class="progress is-danger" max="100">
    30%
</progress>
<progress class="progress is-medium is-dark" max="100">
    45%
</progress>
<progress class="progress is-large is-info" max="100">
    60%
</progress>

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

100

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

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

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

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

        <b-progress type="is-warning" :value="100"></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

Indeterminate

Type and Size

Show Value Keep Trailing Zeroes

Format and Precision

<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>
        </div>

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

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

Slot

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

Custom display with HTML

75 / 100

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>

API

Name	Description	Type	Value	Default
`type`	Type (color) of the progress bar, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-mix`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	`is-darkgrey`
`size`	Size of the progress bar, optional	String	`is-small`, `is-medium`, `is-large`	—
`value`	The progress value, progress will be indeterminate if undefined.	Number	—	—
`max`	The maximum value for the progress bar.	Number	—	`100`
`show-value`	If the value should be displayed inside the progress bar.	Boolean	—	`false`
`format`	Which 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 `percent`	String	`raw`, `percent`	`raw`
`precision`	How many decimals should be displayed.	Number	—	`2`
`keep-trailing-zeroes`	Truncate or not the trailing zeroes	Boolean	—	`true`

Name slot	Description	Props (if no)
`default`	This will be displayed inside the progress bar instead of the calculated value	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$progress-bar-background-color`	color	`$$border-light`
`$progress-value-background-color`	color	`$text`
`$progress-border-radius`	size	`$radius-rounded`
`$progress-indeterminate-duration`	string	`1.5s`
`$progress-text-color`	color	`$white`