Minimal SVG Percentage Circle Plugin - PercentChart.js
File Size: | 5.12 KB |
---|---|
Views Total: | 4097 |
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.
<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.