Radial Progress Bar With jQuery And SVG - JSRadial

File Size: 8.58 KB
Views Total: 1681
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.