Start Here
Features
Sass Tools
CSS Library
CSS Helpers
Progress Bar
Native HTML progress bars
The Bulma progress bar is a simple CSS class that styles the native
<progress> HTML element.
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 .
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
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
