Skip to content
Related Articles

Related Articles

Bulma | Progress Bar
  • Last Updated : 18 Jun, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :