You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
Progress Bar
Native HTML progress bars
<progress class="progress" value="15" max="100">15%</progress>Colors #
<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>Variables #
| Name | Type | Default value | Computed value |
|---|---|---|---|
| Name | Type | Default value | Computed value |
$progress-bar-background-color
|
color |
$border
|
hsl(0, 0%, 86%)
|
$progress-value-background-color
|
color |
$text
|
hsl(0, 0%, 29%)
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
