There is also a default slot if you want to display anything you want inside the progress bar.
Progress
Wrapper around Bulma / Native HTML progress bars
40
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
40
60
80
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>
# Not rounded
40
80%
<template>
<section>
<b-progress
:rounded="false"
:value="40"
type="is-success"
show-value
></b-progress>
<b-progress
:rounded="false"
:value="80"
type="is-success"
show-value
format="percent"
></b-progress>
</section>
</template>
# Values
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
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>
# Multiple bars
You can also include multiple progress bars in a progress component if you need.
* This will not use the native progress element.
<template>
<section>
<b-progress format="percent" :max="80">
<template #bar>
<b-progress-bar :value="10" show-value></b-progress-bar>
<b-progress-bar :value="20" type="is-primary" show-value></b-progress-bar>
<b-progress-bar :value="30" type="is-warning" show-value></b-progress-bar>
</template>
</b-progress>
<b-progress size="is-medium" type="is-success" show-value>
<template #bar>
<b-progress-bar :value="10"></b-progress-bar>
<b-progress-bar :value="20" type="is-primary"></b-progress-bar>
<b-progress-bar :value="30" type="is-warning">Wow!</b-progress-bar>
</template>
</b-progress>
<b-progress :rounded="false" size="is-large">
<template #bar>
<b-progress-bar :value="10" show-value></b-progress-bar>
<b-progress-bar :value="20" type="is-primary" show-value></b-progress-bar>
<b-progress-bar :value="30" type="is-warning"></b-progress-bar>
</template>
</b-progress>
</section>
</template>
# API
Progress
Name | Description | Type | Values | Default |
|---|---|---|---|---|
type | Type (color) of the progress bar, optional | String | is-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 Sass | is-darkgrey |
size | Size of the progress bar, optional | String | is-small, is-medium, is-large | — |
rounded | rounded style of the progress bar, optional | Boolean | false, true | true |
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 |
locale | Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifier | String, Array of String | — | undefined: default to browser locale. |
Bar
Name | Description | Type | Values | Default |
|---|---|---|---|---|
type | Type (color) of the progress bar, optional | String | is-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 Sass | inherited from parent |
value | The progress value. | Number | — | — |
show-value | If the value should be displayed inside the progress bar. | Boolean | — | inherited from parent |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
| Bulma variables | Link |
This page is open source. Noticed a typo or something's unclear?