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

Download

          
            <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

Download

          
            <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

Download

          
            <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%

Bulma Progress Bar

Bulma CSS Colored Progress Bar

Example

Progress Bar Size

Small Progress Bar

Example

Normal Progress Bar

Example

Medium Progress Bar

Example

Large Progress Bar

Example

Indeterminate Progress Bar

Bulma CSS Large Progress Bar

Web Tutorials