The Bulma progress bar is a simple CSS class that styles the native <progress> HTML element.
Progress Bar
Native HTML progress bars
<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.
<progress class="progress is-primary" value="15" max="100">15%</progress>
<progress class="progress is-link" 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 #
<progress class="progress is-small" value="15" max="100">15%</progress>
<progress class="progress" 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.
<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>Variables #
You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| Name | Type | Default value | Computed value |
$progress-bar-background-color
|
color |
$border-light
|
hsl(0, 0%, 93%)
|
$progress-value-background-color
|
color |
$text
|
hsl(0, 0%, 29%)
|
$progress-border-radius
|
size |
$radius-rounded
|
290486px
|
$progress-indeterminate-duration
|
string |
1.5s
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
