Radial Progress Bar With jQuery And SVG - JSRadial

JSRadial is a very small jQuery plugin which lets you render a customizable progress/loading bar using SVG element and HTML attributes.

How to use it:

1. Put the JSRadial.js script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="JSRadial.js"></script>

2. Create a container element for the SVG based progress bar.

<div class="radial"></div> 

3. Customize the progress bar using the following HTML attributes.

• value="75": current percentage value 
• colorbg="#fff": background color 
• colorfg="rgba(0,0,0,0.2)": foreground color
• size="200": size
• radius="55": radius
• suffix="%": suffix
• text="": custom text

<div class="radial" 
     value="75" 
     colorbg="#fff" 
     colorfg="rgba(0,0,0,0.2)" 
     size="200" 
     radius="55" 
     suffix="%">
</div> 

4. To customize the radial progress bar with your own CSS styles:

.radial-text {
  /*
    your css here
  */
}

---

This awesome jQuery plugin is developed by bersLucas. For more Advanced Usages, please check the demo page or visit the official website.