Using jQuery / HTML5 to animate a circle

Problem

For a personal project, I’m tyring to make a timer application (for controlling Poker blind schedules). I know there are several solutions already on the market, but for reasons which are too lengthy to go into here, we need a bespoke system. Although the output template of the system will ultimately be definable by the end user, we would like to include a widget which shows a circle that gets animated as the time counts down. Here’s an illustration of a working example, showing the yellow circle and what we’d like to achieve (or something similar, anyway):

How to animate the circle?

My question is, how would one code the animation as shown below using either jQuery or raw HTML5 / CSS3 animations? This is for a web application using jQuery, so there are no other library options I can use.

Advanced thanks!

Problem courtesy of: BenM

Solution

If you can use HTML5, canvas is probably your best bet. Mozilla has some decent tutorials on drawing arcs. This should be enough to get you started.

var canvas = document.getElementById('canvasid'),
width = canvas.width,
height = canvas.height,
ctx = canvas.getContext('2d');

function drawTimer(deg) {
var x = width / 2, // center x
y = height / 2, // center y
radius = 100,
startAngle = 0,
endAngle = deg * (Math.PI/180),
counterClockwise = true;

ctx.clearRect(0, 0, height, width);
ctx.save();

ctx.fillStyle = '#fe6';

// Set circle orientation
ctx.translate(x, y);
ctx.rotate(-90 * Math.PI/180);

ctx.beginPath();
ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise);
ctx.lineTo(0, 0);
ctx.fill();
}

setInterval(function() {

// Determine the amount of time elapsed; converted to degrees
var deg = (elapsedTime / totalTime) * 360;

drawTimer(deg);

}, 1000);

Solution courtesy of: scurker

View additional discussion.