Animación de círculo SVG

Estoy tratando de hacer una animación circular,
Actualmente tengo esto: http://jsfiddle.net/gf327jxu/1/

   

css:

 .circle{ stroke:green; stroke-width:10; fill:none; } 

Lo quiero animado como un círculo de progreso, algo como esto: http://jsfiddle.net/andsens/mLA7X/ pero en SVG,
Y necesito que sea en el sentido de las agujas del reloj, ¿cómo puedo lograr esto, y esto es posible?

Aquí hay un ejemplo de violín .

Nota: utilicé r = 57 , ya que el perímetro es 358.1 que está cerca de 360 degrees . Para diferentes valores r , necesita calcular el stroke-dasharray

Muchas gracias a @Robert Longson, @Erik Dahlström y @Phrogz por las soluciones SO a lo largo de los años. Este violín es solo uno de sus ajustes.


 (function() { // math trick 2*pi*57 = 358, must be less than 360 degree var circle = document.getElementById('green-halo'); var myTimer = document.getElementById('myTimer'); var interval = 30; var angle = 0; var angle_increment = 6; window.timer = window.setInterval(function() { circle.setAttribute("stroke-dasharray", angle + ", 20000"); myTimer.innerHTML = parseInt(angle / 360 * 100) + '%'; if (angle >= 360) { window.clearInterval(window.timer); } angle += angle_increment; }.bind(this), interval); })() 
   0%  
    svg circle animation