I like the jquery-circle-progress plugin but I wanted it to do circle timing because I didn't like any of the other circle timers out there.
Here is what I came up with:
<html>
<body>
<div id="circle_timer"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-circle-progress.js"></script>
<script type="text/javascript" src="jquery-circle-progress-timer.js"></script>
<script type="text/javascript">
circle_timer = new CircleTimer({
target: "#circle_timer",
duration: 60,
onFinished: function() {
console.log("timer finished!");
}
}, {
fill: { color: "#1669a4" },
animation: false,
thickness: 40,
size: 300
});
circle_timer.start();
</script>
</body>
</html>
Pretty easy, the first block of options are the timer specific ones, and the second block of options go straight into the circleProgress
class.
Here is what the above code would produce:
Perfect, I was just searching for something like that ;)