Animated Circular Progress Indicator Plugin With jQuery And Canvas

Grasp Mobile Progress Circle is a very small jQuery plugin used for generating a circular, customizable, smoothly animated and canvas based progress bar to indicate the loading status.

How to use it:

1. Put jQuery library and the Grasp Mobile Progress Circle plugin's files in your html document.

<link rel="stylesheet" href="grasp_mobile_progress_circle.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="grasp_mobile_progress_circle.js"></script>

2. Create a DIV element in which you want to place the circular progress bar.

<div id="progress-circle"></div>

3. Initialize the circular progress bar with default settings.

var progress_circle = $("#progress-circle").gmpc();

4. Animate the progress bar to a specific percentage value in 3 seconds:

// 80%
progress_circle.gmpc('animate', 80, 3000);

5. Update the progress bar.

// 90%
progress_circle.gmpc('percent', 90);

6. All default options to customize the circular progress bar.

var progress_circle = $("#progress-circle").gmpc({
    color: "#0B2546",
    height: "200px",
    width: "200px",
    line_width: 8,
    starting_position: 25,
    percent: 100,
    counter_clockwise: false,
    text: 'percent',
    font_size: "28px",
    font_family: "Helvetica"
});

---

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