Skip to main content

Progress

Progress bar created with native HTML progress tag. To indicate progress on downloading and loading pages with different colors. With other options for the custom progress bar.

Default progress​

20%
<progress value="..." max="..." class="progress">
 ...
</progress>

Progress with other colors​

15%25%35%45%55%65%75%
<progress class="progress is-primary">
 ...
</progress>

Other classes: is-primary, is-secondary, is-tertiary, is-danger, is-warning. is-success, and is-info.

Custom progress component​

25%
50%
75%
<div class="progress is-primary">
  <div class="inner-progress" style="width: ...;">...%</div>
</div>

Other classes: is-primary, is-secondary, is-tertiary, is-danger, is-warning. is-success, and is-info.

Progress different sizes​

.is-small

15%

Normal size

25%

.is-large

35%