Progress

Progress is designed to show in-progress data.

Usage

A progress bar is offen used to show in-progress data like loading progress. They can be created by wrapping .progress-bars inside a .progress container.

In the below example, a single progress bar is wrapped in a .progress container, its width is controlled with the size utility class .w-25.

<div class="progress">
  <div class="progress-bar w-25">25%</div>
</div>

Background

The background of a progress bar can be changed by using the background utilities.

<div class="progress">
  <div class="progress-bar w-25">25%</div>
  <div class="progress-bar w-33 bc-danger">33%</div>
  <div class="progress-bar w-33 bc-dark">33%</div>
</div>

Height

In the below example, the height of the progress bar is changed by adding an inline style to its .progress container. Of course, you’d better change the height in stylesheets in real projects.

<div class="progress" style="height:1rem">
  <div class="progress-bar w-25"></div>
  <div class="progress-bar bc-danger w-50"></div>
</div>

Sass Variables

Size

$progress-height-rem: 2rem !default

$progress-bar-min-width-em: 3em !default

$progress-bar-padding: 0 $spacing-tiny-rem !default

Others

$progress-bar-typography-size-level: 6 !default

The value must be an integer between 1 and 6.

$progress-bar-color: $color-inverse-main !default

$progress-border-radius: $border-radius-main !default

$progress-background: $background-color-muted !default

$progress-bar-background: $background-color-primary !default