# Minimal SVG Percentage Circle Plugin - PercentChart.js

File Size: 5.12 KB 376 04/06/2020 03:14:00 UTC 04/04/2020 02:02:05 UTC Go to website 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.