Progress Bar

Simple styling for HTML Progress Bars

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

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

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

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

CSS variables

Override the default progress bar styling with CSS variables.

.progress {
  --bar-height: 1rem;
  --margin-bottom: 0.4rem;
  --bar-color: var(--color-light-grey);
  --value-color: var(--color-dark);
}
Copy

Sass variables

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