Progress bars

Progress bars are used to visualize the progression of an extended operation, like the initialization progress of an element or the progress within a steps wizard. The only dynamic parameter used in progress bars is the data-progress attribute that changes the progress bar width but also allows progress indication labels.

• Progress bar component
• Progress bar sizes
• Progress bar colors
  • Contextual color variation
• Progress indication labels

Progress bar component

The progress bar component - including all its features, even varying colors - is completely written in CSS, with just a few lines markup.

Code output

HTML Markup

Copy<div class="progress">
  <div class="progress-bar" data-progress="60%"></div>
</div>

Progress bar sizes

Progress bars come in two different size variations, normal and thin - in order to use the thin version the progress-thin class must be applied to the progress component.

Code output

HTML Markup

Copy<div class="progress progress-thin">
  <div class="progress-bar" data-progress="60%"></div>
</div>

Progress bar colors

The progress bar component in its simple form comes in two color flavors, normal and dark. The dark version can be used by applying the progress-dark class to the progress element.

Code output

HTML Markup

Copy<div class="progress progress-dark">
  <div class="progress-bar" data-progress="60%"></div>
</div>

The progress bar component also features color variation - the progress bar color starts transparent and gains opacity as the progress bar indicator increases in width. To use this feature a progress-varied class must be applied on the progress component. The feature works with both progress bar sizes and both color flavors.

Code output

HTML Markup

Copy<div class="progress progress-varied">
  <div class="progress-bar" data-progress="25%"></div>
</div>

Contextual color variation

Progress bars also feature increasing contextual color variation, for use cases like password strength indication - the progress bar color starts in red color and increasingly changes hue until it turns green when the progress bar width reaches 100% width, in 5 different color tiers. A progress-contextual class has to be applied on the progress component for this feature to be used. Applying a progress-contextual-reverse class reverses the color variation effect.

Code output

Contextual color variation

Reverse contextual color variation

HTML Markup

Copy<div class="progress progress-contextual">
  <div class="progress-bar" data-progress="25%"></div>
</div>

<div class="progress progress-contextual-reverse">
  <div class="progress-bar" data-progress="25%"></div>
</div>

Progress indication labels

Progress indication labels can be shown in the middle of a progress bar, simply by applying the class progress-label on the progress component as shown.

Code output

HTML Markup

Copy<div class="progress progress-label">
  <div class="progress-bar" data-progress="60%"></div>
</div>