Using jQuery / HTML5 to animate a circle


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


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.fillStyle = '#fe6';

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

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

setInterval(function() {

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


}, 1000);

Solution courtesy of: scurker

View additional discussion.