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.

The label that appears in the center of the radial is represented by a <span> element with class .radial__label

<div class="radial" data-value="50">
	<span class="h4 radial__label">50%</span>
</div>

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

<div class="radial" data-value="90" data-timing="1000" data-color="#4a90e2" data-size="200" data-bar-width="10">
	<span class="h3 radial__label">90%</span>
</div>