Radials

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