Bulma Progress Bars Colors

Last Updated : 09 Feb, 2022

Bulma is an open-source CSS framework that provides pre-built components which can be combined together to make responsive websites and web applications. In this article, we will be seeing how to make colored progress bars in Bulma.

Bulma Progress Bar Color Classes:

is-white: This class is used to change the color of the progress bar to the white color defined in Bulma $colors Sass Map.
is-black: This class is used to change the color of the progress bar to the black color defined in Bulma $colors Sass Map.
is-light: This class is used to change the color of the progress bar to the light color defined in Bulma $colors Sass Map.
is-dark: This class is used to change the color of the progress bar to the dark color defined in Bulma $colors Sass Map.
is-primary: This class is used to change the color of the progress bar to the primary color defined in Bulma $colors Sass Map.
is-link: This class is used to change the color of the progress bar to the link color defined in Bulma $colors Sass Map.
is-info: This class is used to change the color of the progress bar to the info color defined in Bulma $colors Sass Map.
is-success: This class is used to change the color of the progress bar to the success color defined in Bulma $colors Sass Map.
is-warning: This class is used to change the color of the progress bar to the warning color defined in Bulma $colors Sass Map.
is-danger: This class is used to change the color of the progress bar to the danger color defined in Bulma $colors Sass Map.

To make colored progress bars in Bulma you can add Bulma progress bar color classes to the progress bar element.

Syntax:

<progress class="progress Bulma-Progress-Bar-Color-Class" 
          value=".." max="..">
          ...
</progress>

Below example illustrate the Bulma Progress bars Colors:

Example: The example below illustrates how to change the color of the progress bar using Bulma progress bar color classes.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Coloured Progress Bars</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
     
    <b>Bulma Coloured Progress Bars</b>
     
    <div class="container is-fluid mt-5">
        <progress class="progress is-white"
            value="20" max="100">
        </progress>
         
        <progress class="progress is-black"
            value="25" max="100">
        </progress>
         
        <progress class="progress is-light"
            value="30" max="100">
        </progress>
         
        <progress class="progress is-dark"
            value="35" max="100">
        </progress>
         
        <progress class="progress is-primary"
            value="40" max="100">
        </progress>
         
        <progress class="progress is-link"
            value="45" max="100">
        </progress>
         
        <progress class="progress is-info"
            value="50" max="100">
        </progress>
         
        <progress class="progress is-success"
            value="55" max="100">
        </progress>
         
        <progress class="progress is-warning"
            value="60" max="100">
        </progress>
         
        <progress class="progress is-danger"
            value="65" max="100">
        </progress>
    </div>
</body>
 
</html>