The Bulma progress bar is a simple CSS class that styles the native
<progress> HTML element.
Sponsor
Progress Bar
Native HTML progress bars
Example
HTML
<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.
Example
HTML
<progress class="progress is-link" value="15" max="100">
15%
</progress>Example
HTML
<progress class="progress is-primary" value="30" max="100">
30%
</progress>Example
HTML
<progress class="progress is-info" value="45" max="100">
45%
</progress>Example
HTML
<progress class="progress is-success" value="60" max="100">
60%
</progress>Example
HTML
<progress class="progress is-warning" value="75" max="100">
75%
</progress>Example
HTML
<progress class="progress is-danger" value="90" max="100">
90%
</progress>Sizes #
Example
HTML
<progress class="progress is-small" value="20" max="100">
20%
</progress>Example
HTML
<progress class="progress is-normal" value="40" max="100">
40%
</progress>Example
HTML
<progress class="progress is-medium" value="60" max="100">
60%
</progress>Example
HTML
<progress class="progress is-large" value="80" max="100">
80%
</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 total duration is not yet determined.
Example
HTML
<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>Sass and CSS variables #
|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
