Progress circle built with the HTML canvas element and jQuery
JavaScript HTML CSS
Latest commit 95fcff3 Dec 21, 2016 @theblindprophet committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
demo
dist
README.md

README.md

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.