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 – Radials – 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

Radials

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

Basic Markup

Radials are useful for a variety of purposes and are simple and easy to include in your pages. The radial element in its most basic form requires a .radial element with a data-value attribute indicating what percentage of the radial to fill.

50%

Modifying Appearance

Controlling the appearance of the radial is achieved using a number of data attributes added to the .radial element as listed below:

  • data-size – A numeric value in pixels, controls the size of the radial
  • data-timing – A numeric value in milliseconds, controls the speed of the animation
  • data-color – A hex code value that controls the color of the progress bar
  • data-bar-width – A numeric value in pixels that controls the width of the bar
90%

See the Radials in action

VIEW THIS PAGE

or try the admin demo ↗