Bulma Progress Bar

Bulma Progress Bar

Steps To Create Bulma CSS Progress Bar

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

Example

15%

General Syntax

Try it now

Source Code

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

Try it now

Source Code

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

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

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

Try it now

Code Explanation

...

Large Progress Bar

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

Example

80%

General Syntax

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

Try it now

Source Code

Try it now

Source Code : Output

Bulma CSS Large Progress Bar

15% 30% 45% 60%