Bulma Progress bars Sizes

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>

Output:

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

Bulma Progress bars Sizes

Explore