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.
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" ,{ |
5. Determine the duration of the animation. Default: ‘0.2s’.
1 |
const myCircle = new PercentChart( "container" ,{ |
6. Determine time to wait before filling up the circle. Default: ‘0.2s’.
1 |
const myCircle = new PercentChart( "container" ,{ |
7. Apply an easing function to the animation. Default: ‘linear’.
1 |
const myCircle = new PercentChart( "container" ,{ |
8. Set the direction of the circle. Default: ‘ccw’.
1 |
const myCircle = new PercentChart( "container" ,{ |
9. Determine whether to show the percentage value on hover. Default: ‘false’.
1 |
const myCircle = new PercentChart( "container" ,{ |
This awesome jQuery plugin is developed by mmfallacy. For more Advanced Usages, please check the demo page or visit the official website.