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

Documentation

Everything you need to create a website with Bulma

# Progress bars

## Native HTML progress bars

Colors Yes
Sizes Yes
Variables Yes

15%

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

### Colors #

30% 45% 60% 75% 90%

    <progress class="progress is-primary" 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>

### Variables #

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

Name | Default value
--- | ---
Name | Default value
`$progress-bar-background-color` | `$border`
`$progress-value-background-color` | `$text`

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!