¿Cómo crear un temporizador de cuenta regresiva circular usando HTML, CSS o JavaScript?

Actualmente, estoy trabajando en un juego de preguntas y, para cada pregunta, deseo colocar un temporizador de cuenta atrás. Tengo algunos complementos, pero me gustaría poder crearlo yo mismo. Lo que trato de crear se parece al de la imagen a continuación. ¿Puedes decirme cómo puedo hacerlo?

¿Hay alguna forma de asignar un borde solo hasta un porcentaje específico del perímetro, para que yo pueda dar un borde, primero completo, y luego a medida que avance cada segundo, puedo seguir disminuyéndolo / boostlo para obtener de la manera perfecta.

El temporizador que deseo crear debería verse algo así (espero que comprenda cómo su borde azul boostá cada segundo):

enter image description here

Aquí es algo con lo que estaba jugando hace un tiempo. Utiliza una combinación de SVG, transiciones CSS y javascript. Deberías ser capaz de desgarrarlo y usarlo como punto de partida …

/** * The setTimeout({},0) is a workaround for what appears to be a bug in StackSnippets. * It should not be required. See JSFiddle version. */ setTimeout(function() { var time = 10; /* how long the timer will run (seconds) */ var initialOffset = '440'; var i = 1 /* Need initial run as interval hasn't yet occured... */ $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time))); var interval = setInterval(function() { $('h2').text(i); if (i == time) { clearInterval(interval); return; } $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time))); i++; }, 1000); }, 0) 
 .item { position: relative; float: left; } .item h2 { text-align:center; position: absolute; line-height: 125px; width: 100%; } svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .circle_animation { stroke-dasharray: 440; /* this value is the pixel circumference of the circle */ stroke-dashoffset: 440; transition: all 1s linear; } 
  

0

Layer 1

Debería ver el plugin jquery Knob https://github.com/aterrien/jQuery-Knob , la entrada circular generada en canvas y establecer el comportamiento del temporizador como:

 var time = 0, maxTime = 60; $('#dial').knob({ readOnly : true, thickness : 0.1, max : maxTime }); setInterval(function() { if(time>maxTime) time = 0; time++; $('#dial') .val(time) .trigger('change'); }, 1000); 

Hice un codepen aquí: http://codepen.io/pik_at/pen/azeYRg