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