mercredi, mars 20, 2019
[stack_hero image= »38″]

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 →

[vc_section css= ».vc_custom_1498221033755{padding-top: 0px !important;} »]
Note: The elements in this page are currently available to Visual Composer only (not Variant)
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

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

[stack_progress full= »80″ label= »80% »][stack_progress full= »40″ label= »40% »][stack_progress full= »20″ label= »20% »]
[/vc_section][vc_section css= ».vc_custom_1498221033755{padding-top: 0px !important;} »]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

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
[stack_progress full= »40″ label= »40% » custom_css_class= »progress-horizontal–lg « ][stack_progress full= »20″ label= »20% » custom_css_class= »progress-horizontal–sm »]