Minimal SVG Percentage Circle Plugin - PercentChart.js

A jQuery plugin to render an SVG based circular progress bar & loading bar that fills up with a given duration based on percentage data you specify.

How to use it:

1. Load the necessary stylesheet percent-chart.css to render SVG circles.

<link rel="stylesheet" href="percent-chart.css" />

2. Create a container to hold the circular progress bar.

<div id="container"></div>

3. Load the JavaScript file percent-chart.js after jQuery library (slim build).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/percent-chart.js"></script>

4. Initialize the plugin and determine the percentage value as follows.

const myCircle = new PercentChart("container",{
      data:{
        // 10%
        percent: 10,
        // text & number displayed inside the circle
        actual: 190,
        unit:"TRIALS"
      }
})

5. Determine the duration of the animation. Default: '0.2s'.

const myCircle = new PercentChart("container",{
      textDuration: '.1s',
      chartDuration: '2s',
      data:{
        percent: 10,
        actual: 190,
        unit:"TRIALS"
      }
})

6. Determine time to wait before filling up the circle. Default: '0.2s'.

const myCircle = new PercentChart("container",{
      delay: '2s',
      data:{
        percent: 10,
        actual: 190,
        unit:"TRIALS"
      }
})

7. Apply an easing function to the animation. Default: 'linear'.

const myCircle = new PercentChart("container",{
      easing: 'ease-in',
      data:{
        percent: 10,
        actual: 190,
        unit:"TRIALS"
      }
})

8. Set the direction of the circle. Default: 'ccw'.

const myCircle = new PercentChart("container",{
      direction: "cw",
      data:{
        percent: 10,
        actual: 190,
        unit:"TRIALS"
      }
})

9. Determine whether to show the percentage value on hover. Default: 'false'.

const myCircle = new PercentChart("container",{
      enableHover: true,
      data:{
        percent: 10,
        actual: 190,
        unit:"TRIALS"
      }
})

---

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