Dallas: 972-877-4650
Schedule in Dallas
Ft. Worth: 817-205-5749
Schedule in Ft. Worth
Houston: 713-723-4854
Schedule in Houston
OKC: 405-236-1111
Schedule in OKC


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 →

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.


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

See the Radials in action


or try the admin demo ↗