Circular Image Progress Bar Plugin With jQuery - imgProgress

File Size: 4.69 KB
Views Total: 7603
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Circular Image Progress Bar Plugin With jQuery - imgProgress

imgProgress is a tiny yet customizable jQuery plugin for drawing SVG based circular progress bar / right chart with custom images to present the percentage values.

How to use it:

1. Include the style sheet imgProgress.css in the header, and the JavaScript file imgProgress.js at the bottom of the webpage.

<link rel="stylesheet" href="imgProgress.css">
<script src="//"></script>
<script src="imgProgress.js"></script>

2. Create a container in which you want to draw the circular progress bar.

<div class="demo"></div>

3. Initialize the plugin to render a basic circular progress bar inside the container you just created.


4. Default configuration options.


  // path to the image
  img_url: "",

  // size in pixels
  size: 200,

  // bar size
  barSize: 12,

  // background color
  backgroundColor: 'white',

  // foreground color
  foregroundColor: 'red',

  // CSS background-size property
  backgroundSize: 'cover',

  // current percentage value
  percent: 0

5. Animate the progress bar to a new percentage value.


6. Update the progress bar.


7. Return the current percentage value.


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