Notice: wp_enqueue_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the contentstudio-dashboard handle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/www/francisco/wp-includes/functions.php on line 5229

Notice: Trying to access array offset on value of type bool in /home/www/francisco/wp-content/plugins/Ebor-Framework-master/ebor_cpt.php on line 788
Elements – Progress Bars – Francisco Otto
Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/wp-less/vendor/oyejorge/less.php/lib/Less/Parser.php on line 1740

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64


Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64

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 →


Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64

Notice: Trying to access array offset on value of type null in /home/www/francisco/wp-content/plugins/js_composer/include/autoload/vc-shortcode-autoloader.php on line 64
Note: The elements in this page are currently available to Visual Composer only (not Variant)
×

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

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