jQuery Plugin: timer360


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.


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


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.


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.

  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.

  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.

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