Elements – Radials

[vc_row full_width=»stretch_row»][vc_column][stack_hero image=»38″][vc_column_text]

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 →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section css=».vc_custom_1498220950810{padding-top: 0px !important;}» ebor_docs=»»][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»5/12″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

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.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»7/12″][stack_radial colour=»#000000″ full=»50″ size=»140″ width=»6″ label=»50%» icon=»»][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»5/12″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

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

[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»7/12″][stack_radial icon=»»][/vc_column][/vc_row][/vc_section][vc_section][vc_row][vc_column][vc_column_text]

See the Radials in action

VIEW THIS PAGE

or try the admin demo ↗

[/vc_column_text][/vc_column][/vc_row][/vc_section]