{"id":2547,"date":"2017-10-31T18:27:43","date_gmt":"2017-10-31T18:27:43","guid":{"rendered":"http:\/\/stack.tommusdemos.wpengine.com\/?page_id=2547"},"modified":"2017-10-31T18:27:43","modified_gmt":"2017-10-31T18:27:43","slug":"elements-progress-bars","status":"publish","type":"page","link":"https:\/\/csd.iitgn.ac.in\/wp\/elements\/elements-progress-bars\/","title":{"rendered":"Elements – Progress Bars"},"content":{"rendered":"

[vc_row full_width=”stretch_row”][vc_column]\n\t\t\t

\n\t\t\t\t
\"\"<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
[vc_column_text]<\/p>\n

Progress Bars<\/span><\/h1>\n

These modular elements can be readily used and customized across pages and in different blocks.<\/span><\/p>\n

\n

Explore all of Stack’s modular elements
\nat the Element Index Page \u2192<\/a>[\/vc_column_text]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/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]<\/p>\n

Basic Markup<\/h4>\n

Stack’s horizontal progress bars use simple and uncluttered markup, using a simple data attribute to assign the bar its progress value.<\/p>\n

In its most basic form the bar requires a parent .progress-horizontal<\/strong>element with a child .progress-horizontal__bar<\/strong> element. This element requires the data-value<\/strong> attribute which should be assigned a numeric value from 1 – 100 (Note: there is no need to add a ‘%’ symbol to the attribute).<\/p>\n

The label that appears below is represented by a span<\/strong> element with class .progress-horizontal__label<\/strong>[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=”1\/2″]\n\t\t

\n\t\t
<\/div>\n\t\t 80%<\/span>\n\t\t<\/div>\n\t\n\t\t
\n\t\t
<\/div>\n\t\t 40%<\/span>\n\t\t<\/div>\n\t\n\t\t
\n\t\t
<\/div>\n\t\t 20%<\/span>\n\t\t<\/div>\n\t[\/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]<\/p>\n

Modifying Appearance<\/h4>\n

Controlling the appearance of the progress bar is achieved using the following classes added to the .progress-horizontal<\/strong> element:<\/p>\n

NOTE: Animated progress bars are will be added in a forthcoming update.<\/p>\n

    \n
  • .progress-horizontal–lg<\/strong> – Renders a larger progress bar<\/li>\n
  • .progress-horizontal–sm<\/strong> – Renders a smaler<\/li>\n<\/ul>\n

    [\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=”1\/2″]\n\t\t

    \n\t\t
    <\/div>\n\t\t 40%<\/span>\n\t\t<\/div>\n\t\n\t\t
    \n\t\t
    <\/div>\n\t\t 20%<\/span>\n\t\t<\/div>\n\t[\/vc_column][\/vc_row][\/vc_section]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

    [vc_row full_width=”stretch_row”][vc_column][\/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][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][vc_column width=”1\/2″][\/vc_column][\/vc_row][\/vc_section]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":33,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2547","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages\/2547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/comments?post=2547"}],"version-history":[{"count":0,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages\/2547\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages\/33"}],"wp:attachment":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/media?parent=2547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}