svg percent chart - Free Download Minimal SVG Percentage Circle Plugin - PercentChart.js

Free Download Minimal SVG Percentage Circle Plugin – PercentChart.js

Posted on

This time I will share jQuery Plugin and tutorial about Minimal SVG Percentage Circle Plugin – PercentChart.js, hope it will help you in programming stack.

svg percent chart - Free Download Minimal SVG Percentage Circle Plugin - PercentChart.js
File Size: 5.12 KB
Views Total: 1725
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

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

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

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

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

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

1 const myCircle = new PercentChart("container",{
2       data:{
3         // 10%
4         percent: 10,
5         // text & number displayed inside the circle
6         actual: 190,
7         unit:"TRIALS"
8       }
9 })

5. Determine the duration of the animation. Default: ‘0.2s’.

1 const myCircle = new PercentChart("container",{
2       textDuration: '.1s',
3       chartDuration: '2s',
4       data:{
5         percent: 10,
6         actual: 190,
7         unit:"TRIALS"
8       }
9 })

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

1 const myCircle = new PercentChart("container",{
2       delay: '2s',
3       data:{
4         percent: 10,
5         actual: 190,
6         unit:"TRIALS"
7       }
8 })

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

1 const myCircle = new PercentChart("container",{
2       easing: 'ease-in',
3       data:{
4         percent: 10,
5         actual: 190,
6         unit:"TRIALS"
7       }
8 })

8. Set the direction of the circle. Default: ‘ccw’.

1 const myCircle = new PercentChart("container",{
2       direction: "cw",
3       data:{
4         percent: 10,
5         actual: 190,
6         unit:"TRIALS"
7       }
8 })

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

1 const myCircle = new PercentChart("container",{
2       enableHover: true,
3       data:{
4         percent: 10,
5         actual: 190,
6         unit:"TRIALS"
7       }
8 })

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