how to design circular count down timer for 30 second using SVG or JavaScript or Jquery?

I'm looking for 30 second count down timer filling ring using SVG or JavaScript. I have found below example in stackoverflow and I'm trying to implement it using function but facing problem in feeling ring using animation. I cannot start my timer again before 30 second as it shows previous ring filling. Please suggest.Jsfiddle http://ift.tt/2pkmtKs

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://ift.tt/nvqhV5">
     <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>