JSRadial
JSRadial is a JQuery plugin that uses SVG elements to draw a radial progressbar. To use JSRadial, call the script from the bottom of your
<div class="radial variablename" value="75" size="200" font-size="2" colorbg="#fff" colorfg="#723f69" radius="75" suffix="%"></div>

Documentation

To call a JSRadial element, create a <div> element with the class radial VARIABLENAME, where VARIABLENAME is any name.
You will need this variable to update the value.

value

The value element is the amount the radial will display initially. Use a number from 0-100 here.

size

The size element holds the size of the entire relement, in pixels.

font-size

The font-size element holds the size of the font, in em.

colorbg

The colorbg element holds the color of the inner circle. You can use hex, HTML color, or rgba color codes.

colorfg

The colorfg element holds the color of the outer part of the circle. You can use hex, HTML color, or rgba color codes.

radius

The radius elements holds the size of the inner circle. A lower element will show more of the outer circle and vice-versa.

suffix

The suffix element holds the text that displays after the number. You can put any string in here.

text

The text element holds the text to display in the middle of the radial. If this doesn't exist, then the value will be used.

styling

To style the text at the center of the radial, use css to modify .radial-text. If you would like to style the text of a specific radial, use .VARIABLENAME .radial-text, where VARIABLENAME is the name of that radial.

updating

To update a radial, use JS can call updateRadial(VARIABLENAME, VALUE), where VARIABLENAME is the name of that variable, and VALUE is a number from 0-100.