Progress Bar

Simple styling for HTML Progress Bars

The progress class can be used to style the existing HTML progress tag.


30%
<progress class="progress" max="100" value="30">30%</progress>
Copy

Style

Colors

You can use the color palette to color your progress bars by prefixing the name of a color with is-*. For example to use the primary color you would add the is-primary modifier to the progress element.


10%20%30%40%50%60%70%80%90%
<progress class="progress is-primary" max="100" value="10">10%</progress>
<progress class="progress is-warning" max="100" value="20">20%</progress>
<progress class="progress is-info" max="100" value="30">30%</progress>
<progress class="progress is-danger" max="100" value="40">40%</progress>
<progress class="progress is-success" max="100" value="50">50%</progress>
<progress class="progress is-black" max="100" value="60">60%</progress>
<progress class="progress is-night" max="100" value="70">70%</progress>
<progress class="progress is-light" max="100" value="80">80%</progress>
<progress class="progress is-dark-grey" max="100" value="90">90%</progress>
Copy

Round

The is-round modifier will round the corners of the progress bar.


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

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$progress-heightunits1rem
$progress-margin-bottomunits0.4rem
$progress-bar-colorcolor$light-grey
$progress-bar-value-colorcolor$dark