[vc_row full_width=”stretch_row”][vc_column]
[vc_column_text]
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_column_text]
[/vc_column][/vc_row][vc_section css=”.vc_custom_1498221033755{padding-top: 0px !important;}”][vc_row][vc_column][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJhbGVydCUyMGJnLS1lcnJvciUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyYWxlcnRfX2JvZHklMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTNFJTNDc3Ryb25nJTNFTm90ZSUzQSUzQyUyRnN0cm9uZyUzRSUyMFRoZSUyMGVsZW1lbnRzJTIwaW4lMjB0aGlzJTIwcGFnZSUyMGFyZSUyMGN1cnJlbnRseSUyMGF2YWlsYWJsZSUyMHRvJTIwVmlzdWFsJTIwQ29tcG9zZXIlMjBvbmx5JTIwJTI4bm90JTIwVmFyaWFudCUyOSUzQyUyRnNwYW4lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmFsZXJ0X19jbG9zZSUyMiUzRSVDMyU5NyUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRQ==[/vc_raw_html][vc_empty_space][/vc_column][/vc_row][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″]
[vc_column_text]
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[/vc_column_text]
[/vc_column][vc_column width=”1/2″]
[/vc_column][/vc_row][/vc_section][vc_section css=”.vc_custom_1498221033755{padding-top: 0px !important;}”][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][vc_column_text]
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
[/vc_column_text]
[/vc_column][vc_column width=”1/2″]
[/vc_column][/vc_row][/vc_section]