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

Progress Bar

Native HTML progress bars

Colors Yes
Sizes Yes
Variables Yes

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

15%
<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.

15% 30% 45% 60% 75% 90%
<progress class="progress is-primary" value="15" max="100">15%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>

Sizes #

15% 30% 45% 60%
<progress class="progress is-small" value="15" max="100">15%</progress>
<progress class="progress" value="30" max="100">30%</progress>
<progress class="progress is-medium" value="45" max="100">45%</progress>
<progress class="progress is-large" value="60" max="100">60%</progress>

Indeterminate #

Since 0.7.4

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 actual duration is not yet determined.

15% 30% 45% 60%
<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 #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Type Default value Computed value
Name Type Default value Computed value
$progress-bar-background-color color $border-light hsl(0, 0%, 93%)
$progress-value-background-color color $text hsl(0, 0%, 29%)
$progress-border-radius size $radius-rounded 290486px
$progress-indeterminate-duration string 1.5s

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#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!