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-horizontal element with a child .progress-horizontal__bar element. This element requires the data-value attribute 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>
Controlling the appearance of the progress bar is achieved using the following classes added to the .progress-horizontal element:
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