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>

Variables #

Name

Type

Value

Computed Value

Computed Type

$progress-bar-background-color

variable

$border-light

hsl(0, 0%, 93%)

color

$progress-value-background-color

variable

$text

hsl(0, 0%, 29%)

color

$progress-border-radius

variable

$radius-rounded

9999px

size

$progress-indeterminate-duration

string

1.5s

$progress-colors

variable

$colors

Bulma colors

map

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Progress Bar

Colors #

Sizes #

Indeterminate #

Variables #

Support Bulma 😃

Newsletter Features, releases, showcase… stay in the loop!