Install:

git clone https://github.com/theblindprophet/progress-circle.git

Include CSS file:

<link rel="stylesheet" type="text/css" href="<some-path>/grasp_mobile_progress_circle-1.0.0.min.css">

Include JS file:

<script src="<some-path>/grasp_mobile_progress_circle-1.0.0.min.js"></script>

Supported with jQuery 3.1.1 and greater.

Not tested with lower versions.

jQuery needs to be loaded before grasp_mobile_progress_circle-1.0.0.min.js and grasp_mobile_progress_circle-1.0.0.min.js needs to loaded before other JavaScript files

Pass in options:

var options = {
    width: "300px",
    line_width: 12,
    color: "#b20808",
    starting_position: 25,
    percent: 25,
    text: "percent"
}
var progress_circle = $("#progress-circle").gmpc(options);

percent: Change the percentage traveled

progress_circle.gmpc('percent', <some-percentage>)

var progress_circle = $("#progress-circle").gmpc(options);
progress_circle.gmpc('percent', 60);

animate: Animate a changing percentage

progress_circle.gmpc('animate', <some-percentage>, <some-time>);

var progress_circle = $("#progress-circle").gmpc(options);
progress_circle.gmpc('animate', 80, 3000);

Animation will travel to <some-percent> from what the progress circle was intialized with

For example:

var options = {
    width: "300px",
    line_width: 12,
    color: "#b20808",
    starting_position: 25,
    percent: 25,
    text: "percent"
}
var progress_circle = $("#progress-circle").gmpc(options);
progress_circle.gmpc('animate', 80, 3000);

The bar will begin 25% traveled. Then it will trave to 80%.

Please feel free to submit pull requests and submit issues.