Grasp Mobile Progress Circle

Author: Jamie Gross

Company: Grasp Mobile Development, LLC

Version: 1.0.0

Date Modified: 21 December 2016

---

Install and Use

---

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

Options

---

Option	Description
color	Color of the bar (Default: #0B2546)
height	Height of the canvas, in px or % (Default: 200px)
width	Width of the canvas, in px or % (Default: 200px)
line_width	Width/thickness of the progress bar (Default: 8)
starting_position	Starting point of the line on the circle in percentage. 0 = top, 25 = right, 50 = bottom, 75 = left (Default: 25)
percent	How far to travel around the circle. 100 = entire circle, 50 = half circle (Default: 100)
counter_clockwise	true = counter-clockwise, false = clockwise (Default: false)
text	Text to have inside the circle. percent will display the percentage the bar has traveled around the circle. Any other text will display that text inside the circle (Default: percent)
font_size	Font size of text inside circle (Default: 28px)
font_family	Font family of text inside circle (Default: Helvetica)

How to Use

---

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);

Extra Methods

---

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%.

---

Pull Requests and Issues

Please feel free to submit pull requests and submit issues.