Download
1. INCLUDE JS FILES
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>
2. HTML
<div id="circle"></div>
3. JAVASCRIPT
$('#circle').circleProgress({
value: 0.75,
size: 80,
fill: {
gradient: ["red", "orange"]
}
});
4. OPTIONS
You should specify options like in usage example above.
|
Option |
Description |
|
value |
This is the only required option. It should be from 0.0 to 1.0
Default: 0 |
|
size |
Size of the circle / canvas in pixels
Default: 100 |
|
startAngle |
Initial angle (for 0 value)
Default: -Math.PI |
|
thickness |
Width of the arc. By default it's automatically calculated as 1/14 of size but you may set your own number
Default: "auto" |
|
fill |
The arc fill config. You may specify next:
- { gradient: ["red", "green", "blue"] }
- { color: "#ff1e41" }
- { image: "http://i.imgur.com/pT0i89v.png" }
- { color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
Default: { gradient: ["#3aeabb", "#fdd250"] } |
|
animation |
Animation config. See jQuery animations.
You may also set it to false
Default: { duration: 1200, ease: "circleProgressEase" }
"circleProgressEase" is just a ease-in-out-cubic easing |
5. EVENTS
When animation is enabled, there are 3 events available:
|
Event |
Handler |
|
circle-animation-start |
function(event):
- event - jQuery event |
|
circle-animation-progress |
function(event, animationProgress, stepValue):
- event - jQuery event
- animationProgress - from 0.0 to 1.0
- stepValue - current step value: from 0.0 to value |
|
circle-animation-end |
function(event):
- event - jQuery event |
JS Tutorial
