Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email
Already have an account? Login

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-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>
Progress: 80%
Progress: 40%
Progress: 20%

Modifying Appearance

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
Progress: 40%
Progress: 20%