Progress Bars
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Basic Markup
Stack's horizontal progress bars use simple and uncluttered markup, using a simple data attribute to assign the bar its progress value.
In its most basic form the bar requires a parent .progress-horizontalelement with a child .progress-horizontal__barelement. This element requires the data-valueattribute which should be assigned a numeric value from 1 - 100 (Note: there is no need to add a '%' symbol to the attribute).
The label that appears below is represented by a <span>element with class .progress-horizontal__label
<div class="progress-horizontal"> <div class="progress-horizontal__bar" data-value="80"></div> <span class="progress-horizontal__label h5">Progress: 80%</span></div>
Modifying Appearance
Controlling the appearance of the progress bar is achieved using the following classes added to the .progress-horizontalelement:
NOTE: Animated progress bars are will be added in a forthcoming update.
- .progress-horizontal--lg- Renders a larger progress bar
- .progress-horizontal--sm- Renders a smaler