Progress Bar

Native HTML progress bars

The Bulma progress bar is a simple CSS class that styles the native <progress> HTML element.

Example

15%

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

15%

HTML

<progress class="progress is-primary" value="15" max="100">15%</progress>

Example

30%

HTML

<progress class="progress is-link" value="30" max="100">30%</progress>

Example

45%

HTML

<progress class="progress is-info" value="45" max="100">45%</progress>

Example

60%

HTML

<progress class="progress is-success" value="60" max="100">60%</progress>

Example

75%

HTML

<progress class="progress is-warning" value="75" max="100">75%</progress>

Example

90%

HTML

<progress class="progress is-danger" value="90" max="100">90%</progress>

Sizes #

Example

20%

HTML

<progress class="progress is-small" value="20" max="100">20%</progress>

Example

40%

HTML

<progress class="progress is-normal" value="40" max="100">40%</progress>

Example

60%

HTML

<progress class="progress is-medium" value="60" max="100">60%</progress>

Example

80%

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

15% 30% 45% 60%

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>