Bulma Progress Bar

To create Bulma progress bar ,assign .progress modifier class to the native <progress> HTML element base class.

Example

15%

General Syntax

      
        <progress class="progress" value="15" max="100">15%</progress>      
    
Try it now

Source Code

          
            <div class="container">
  <progress class="progress" value="15" max="100">15%</progress>
</div>          
        
Try it now

Source Code : Output

15%

Bulma CSS Colored Progress Bar

To create colored progress, add followings .is-primary,.is-link,.is-info,.is-success,.is-warning,.is-danger modifier class to the <progress> element base class.

Example

30%

General Syntax

      
        <progress class="progress {is-link | is-info | is-success | is-warning | is-danger" value="30" max="100">30%</progress>      
    
Try it now

Source Code

          
            <div class="container">
      <progress class="progress is-link" value="30" max="100">30%</progress>
</div>          
        
Try it now

Source Code : Output

30%

Progress Bar Size

Bulma CSS provides different size of progress bar such as normal, small, medium, large.

Small Progress Bar

To create small size of pagination, assign .is-small modifier class to the <progress> element base class.

Example

20%

General Syntax

      
        <progress class="progress is-small" value="20" max="100">20%</progress>      
    
Try it now

Normal Progress Bar

To create normal size of pagination, assign .is-normal modifier class to the <progress> element base class.

Example

40%

General Syntax

      
        <progress class="progress is-normal" value="40" max="100">40%</progress>      
    
Try it now

Medium Progress Bar

To create medium size of pagination, assign .is-medium modifier class to the <progress> element base class.

Example

60%

General Syntax

      
        <progress class="progress is-medium" value="60" max="100">60%</progress>      
    
Try it now

Large Progress Bar

To create large size of progress bar, assign .is-large modifier class to the <progress> element base class.

Example

80%

General Syntax

      
        <progress class="progress is-large" value="80" max="100">80%</progress>      
    
Try it now

Indeterminate Progress Bar

If you do not specify value attribute of <progress> element then you can display an intermediate progress bar.

General Syntax

      
        <progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
<progress class="progress is-medium is-dark" max="100">45%</progress>
<progress class="progress is-large is-info" max="100">60%</progress>      
    
Try it now

Source Code

          
            <div class="container">
<h2 class="custom-space">Bulma CSS Large Progress Bar</h2>
<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
<progress class="progress is-medium is-dark" max="100">45%</progress>
<progress class="progress is-large is-info" max="100">60%</progress>
</div>          
        
Try it now

Source Code : Output

Bulma CSS Large Progress Bar

15% 30% 45% 60%
Web Tutorials
Bulma Progress Bar
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4