[stack_hero image=”38″]

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 →

[/stack_hero]
[vc_section css=”.vc_custom_1498220950810{padding-top: 0px !important;}” ebor_docs=””]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]

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.

[/stack_boxed_content]
[stack_radial colour=”#000000″ full=”50″ size=”140″ width=”6″ label=”50%” icon=””]
[/vc_section][vc_section]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]

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
[/stack_boxed_content]
[stack_radial icon=””]
[/vc_section][vc_section]

See the Radials in action

VIEW THIS PAGE

or try the admin demo ↗

[/vc_section]