comment concevoir le compte à rebours circulaire pendant 30 secondes en utilisant SVG ou JavaScript ou Jquery?

Question

Je suis à la recherche d'anneau de remplissage compte à rebours circulaire de 30 secondes en utilisant SVG ou JavaScript ou Jquery. J'ai trouvé ci-dessous un exemple dans stackoverflow et j'essaye de l'implémenter en utilisant la fonction mais en faisant face à un problème de sentiment en utilisant l'animation. Je ne peux pas recommencer ma minuterie avant 30 secondes car cela montre le remplissage de l'anneau précédent. Veuillez suggérer. JsFiddle travail http://jsfiddle.net/qZrgS/90/

Jquery

$scope.startTimer = function(){ 
var time = 30; 
var initialOffset = '220'; 
var i = 1 
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time))); 
var interval = setInterval(function() { 
    if (i == time) {  
    clearInterval(interval); 
    return; 
    } 
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time))); 
    i++; 
    }, 1000); 
    }; 

Css

svg { 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 
.circle_animation { 
    stroke-dasharray: 220; /* this value is the pixel circumference of the circle */ 
    stroke-dashoffset: 220; 
    transition: all 1s linear; 
} 

Html

<svg class="countdownTimer " width="100" height="100" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <circle class="circle" cx="41" cy="41" r="37" stroke-width="1" fill="none" stroke="grey"/> 
     <circle ng-init="startTimer();" id="circle" class="circle_animation" r="34.44" cy="41" cx="41" stroke-width="5" stroke="#0288d1" fill="none"/><circle class="circle" cx="41" cy="41" r="32" stroke-width="1" fill="none" stroke="grey"/><span ng-init="timer();RequestSend();" id="countdowntimer" class="timeNumber">30</span> 
    </g> 
    </svg> 

Answer 1

Retirez le Animer utilisation de tansition jquery:

var startTimer = function() { 
    $('.circle_animation').css({'stroke-dashoffset': 220 }); 
    $('.circle_animation').stop(); 
    var time = 30; 
    var initialOffset = '0'; 
    var i = 1; 
    $('.circle_animation').animate({'stroke-dashoffset': initialOffset },30000); 

    }; 

demo: http://jsfiddle.net/qZrgS/92/