Skip to content
Related Articles

Related Articles

Bulma Progress bars Sizes

Improve Article
Save Article
  • Last Updated : 30 Jan, 2022
Improve Article
Save Article

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=
</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>


Output:

Bulma Progress bars Sizes

Bulma Progress bars Sizes

Reference Link: https://bulma.io/documentation/elements/progress/#sizes


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!