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
<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
80
<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 grouped>
<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
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 | 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 | — |
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 |
# Variables
You can use these variables to customize this component.
Name | Default |
---|---|
$progress-text-color | $white |
This page is open source. Noticed a typo or something's unclear?