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 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>Indeterminate #
<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
|
hsl(0, 0%, 86%)
|
$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
