Animated Circle To Represent Percentage - jQuery jCirclize

jCirclize is a small yet customizable jQuery percentage/progress gauge plugin that draws an animated circle/ring on a canvas element to represent percentage data.

See Also:

• 10 Best Circular/Radial Progress Bar

How to use it:

1. Import the latest version of jQuery library and the jCirclize plugin's files into the document.

<link href="css/jCirclize.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="dist/jquery.jCirclize.js"></script>

2. Create a container in which you want to place the canvas.

<div id="example">
</div>

3. Call the function on the container element to generate a default percentage/progress gauge.

$(document).ready(function() {
  $('#example').circlize();
});

4. Customize the background/fill colors.

$(document).ready(function() {
  $('#example').circlize({
    background: "rgba(20,20,20,0.5)",
    foreground: "#1a1a1a"
  });
});

5. Customize the stroke width.

$(document).ready(function() {
  $('#example').circlize({
    stroke: 20
  });
});

6. Define the percentage data to represent.

$(document).ready(function() {
  $('#example').circlize({
    perc: 50,
    usePercentage: true
  });
});

7. Set the size of the percentage/progress gauge.

$(document).ready(function() {
  $('#example').circlize({
    radius: 100
  });
});

8. Customize the duratiion of the fill animation.

$(document).ready(function() {
  $('#example').circlize({
    duration: 1000
  });
});

9. Customize the min/max values.

$(document).ready(function() {
  $('#example').circlize({
    min: 100,
    max: 100
  });
});

Changelog:

2020-03-01

• changed var to let

2018-11-21

• fixed code style

2018-11-19

• uses gradients as foreground.

2018-11-17

• Fixed Code Style and ReadMe
• Added Vanilla Version of the library

---

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