Progress Bar

Native HTML progress bars

Sizes

Example Tiny

10%

HTML

<progress class="progress is-tiny" value="10" max="100">10%</progress>

Example Small

20%

HTML

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

Example Normal

30%

HTML

<progress class="progress is-normal" value="30" max="100">30%</progress>

Example Medium

40%

HTML

<progress class="progress is-medium" value="40" max="100">40%</progress>

Example Large

50%

HTML

<progress class="progress is-large" value="50" max="100">50%</progress>

Example Jumbo

60%

HTML

<progress class="progress is-jumbo" value="60" max="100">60%</progress>