Bulma Progress bars Sizes

Last Updated : 30 Jan, 2022

Bulma progress bars are used as an indicator showing the completion progress of a task. It is displayed as a progress bar.

In this article, we will learn about different sizes of progress bars.

Bulma Progress Bar Sizes Classes:

is-small: This class is used to set the progress bar size to small.
is-normal: This class is used to set the progress bar size to normal.
is-medium: This class is used to set the progress bar size to medium.
is-large: This class is used to set the progress bar size to large.

Syntax:

<progress class="progress is-size" value="20" max="100">
   ....
</progress>

Example: The below example shows the use of progress bar size classes in Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Progress bar Size</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 Progress Bar Sizes</b> 
    <div class="container"> 
         
        <h5 class="title is-5">Small Size Progress Bar</h5> 
        <progress class="progress is-small" 
                  value="20" max="100">20%</progress> 
  
        <h5 class="title is-5">Normal Size Progress Bar</h5> 
        <progress class="progress is-normal" 
                  value="40" max="100">40%</progress> 
  
        <h5 class="title is-5">Medium Size Progress Bar</h5> 
        <progress class="progress is-medium" 
                  value="60" max="100">60%</progress> 
          
        <h5 class="title is-5">Small Progress Bar</h5> 
        <progress class="progress is-medium" 
                  value="80" max="100">80%</progress> 
    </div> 
</body> 
  
</html>