Animated Circular Progress Indicator Plugin With jQuery And Canvas
File Size: | 11 KB |
---|---|
Views Total: | 13134 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.