You are viewing the deprecated 0.9.3 version of the website. Click here to view the latest version

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

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

#native_company# #native_desc#
#native_cta#

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