Open In App

Bulma | Progress Bar

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left.

Example 1: This example creating a simple progress bar using Bulma.




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Progress bar</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 70px;
        }
  
        h1 {
            color: green !important;
            margin-bottom: 20px;
        }
    </style>
</head>
  
<body>
    <div class='container has-text-centered'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-6'>
                <div>
                    <h1 class='title'>
                        Progress bar
                    </h1>
                </div>
  
                <div>
                    <progress class="progress" 
                        value="40" max="100">40
                    </progress>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Example 2: This example creating different sizes of progress bars.




<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Progress bar</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 70px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
   
      }
   
      .table td{
        font-size: 20px;
        border: none
      }
   
      .table th{
        font-size: 20px;
        border: none
      }
    </style>
  </head>
  
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-6'>
          <div>
            <h1 class='title'>
              Different sizes Progress bars
            </h1>
            <hr>
          </div>
   
          <table class='table is-fullwidth'>
            <thead>
              <tr>
                <th>Size</th>
                <th>Progress bar</th>
              </tr>
            </thead>
   
            <tbody>
              <tr>
                <td>Small</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-small" 
                      value="25" max="100">25
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Default</td>
                <td>
                  <div>
                    <progress class=
                      "progress" value="40" 
                      max="100">40
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Medium</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-medium" 
                      value="55" max="100">55
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Large</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-large" 
                      value="75" max="100">75
                    </progress>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

Example 3: This example creating different color progress bars.




<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Progress bar</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 70px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 30px;
      }
   
      .table td{
        font-size: 20px;
        border:none
      }
   
      .table th{
        font-size: 20px;
        border:none
      }
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-6'>
          <div>
            <h1 class='title'>
                 Different colors Progress bars
            </h1>
            <hr>
          </div>
   
          <table class='table is-fullwidth'>
            <thead>
              <tr>
                <th>Color</th>
                <th>Progress bar</th>
              </tr>
            </thead>
   
            <tbody>
              <tr>
                <td>Primary</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-primary" 
                      value="20" max="100">20
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Link</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-link" 
                      value="35" max="100">
                      35
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Info</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-info" 
                      value="50" max="100">
                      50
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Success</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-success" 
                      value="65" max="100">65
                    </progress>
                  </div>
                </td>
              </tr>
   
   
              <tr>
                <td>Warning</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-warning" 
                      value="80" max="100">80
                    </progress>
                  </div>
                </td>
              </tr>
   
              <tr>
                <td>Danger</td>
                <td>
                  <div>
                    <progress class=
                      "progress is-danger" 
                      value="95" max="100">95
                    </progress>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

Example 4: This example creating different color indeterminate progress bar.




<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Progress bar</title>
  <link rel='stylesheet' href=
  
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 70px;
    }
  
    h1 {
      color: green !important;
      margin-bottom: 30px;
    }
  
    .table td {
      font-size: 20px;
      border: none
    }
  
    .table th {
      font-size: 20px;
      border: none
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-6'>
        <div>
          <h1 class='title'>
            indeterminate Progress bars
          </h1>
          <hr>
        </div>
  
        <table class='table is-fullwidth'>
          <thead>
            <tr>
              <th>Color</th>
              <th>Progress bar</th>
            </tr>
          </thead>
  
          <tbody>
            <tr>
              <td>Primary</td>
              <td>
                <div>
                  <progress class=
                    "progress is-primary" 
                    max="100">20
                  </progress>
                </div>
              </td>
            </tr>
  
            <tr>
              <td>Link</td>
              <td>
                <div>
                  <progress class=
                    "progress is-link" 
                    max="100">35
                  </progress>
                </div>
              </td>
            </tr>
  
            <tr>
              <td>Info</td>
              <td>
                <div>
                  <progress class=
                    "progress is-info" 
                    max="100">50
                  </progress>
                </div>
              </td>
            </tr>
  
            <tr>
              <td>Success</td>
              <td>
                <div>
                  <progress class=
                    "progress is-success" 
                    max="100">65
                  </progress>
                </div>
              </td>
            </tr>
  
            <tr>
              <td>Warning</td>
              <td>
                <div>
                  <progress class=
                    "progress is-warning" 
                    max="100">80
                  </progress>
                </div>
              </td>
            </tr>
  
            <tr>
              <td>Danger</td>
              <td>
                <div>
                  <progress class=
                    "progress is-danger" 
                    max="100">95
                  </progress>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
  
</html>


Output:

Explanation: Indeterminate progress bar is used to show some progress that is going on, but the actual duration is not yet determined. When the HTML value attribute is not defined, indeterminate progress bar displays.

Note: Here in all the above examples we use some extra Bulma classes like container, column, title, table, etc. to design the content well.



Last Updated : 18 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads