jQuery Plugin: timer360

Description

timer360 was inspired by the "time remaining" animation that you see in iTunes 9 while playing a sample of music. I was working on a project that needed a countdown timer and I thought, what the hell...why not try and emulate that. Thus was born the timer360.

This timer is as customizable as you can get. It allows you to specify everything form the size of the timer to the increments and colors. How is this done you ask? Flash? Nope. This is using only the HTML5 canvas tag. Scroll down to check it out.

Options

name	description	default
radius	Sets the radius of the arc	15.5
strokeWidth	Sets the size of the stroke	3
strokeColor	Sets the color for the stroke	#477050
fillColor	Sets the color for the arc fill	#8ac575)
intervals	An array of numbers representing the time intervals you want the user to select from	[5,25,30]
interval	If set will start the timer immediately for the specified interval. If you would like to use this option you will need to set intervals to an empty array.	10
seconds	Boolean value. If set to false then interval is assumed to be minutes. If set to true then interval is treated as seconds.	false
onComplete	Function that will be triggered when the timer completes. For use if you want to say, add a sound...	false
loop	Setting this option to true will allow the timer to loop instead of stopping at the desired interval.	false

Examples

This is what you get by simply calling #timer360 without any additional options. Click on the "circle" to access the timer intervals. Once you select a value the timer will begin ticking.

$("#timer1").timer360();

You can choose to have the timer start automatically as well by specifying just a single interval

$("#timer2").timer360({ interval : 10, intervals : [] });

What's that? You'd rather have that in seconds than in minutes? No problem!

$("#timer3").timer360({ seconds : true });

How about we change up the color.

$("#timer4").timer360({
  fillColor   : "#1967F7",
  strokeColor : "#00215E",
  seconds     : true
});

Let's change the size of our little timer and while we're at it set some different time intervals.

$("#timer5").timer360({
  radius      : 50.5,
  strokeWidth : 10,
  intervals   : [10,20,30,60,90,120],
  seconds     : true,
  onComplete  : function () { alert("Pomodoro Complete!!!") }
});

You may also choose to have the timer loop instead of finishing at the selected interval.

$("#timer6").timer360({
  radius      : 50.5,
  strokeWidth : 10,
  intervals   : [],
  seconds     : true,
  loop        : true,
  onComplete  : function () { $('<p>Timer Completed</p>').appendTo($('#loop_messages')) }
});