<div id="question-timer" data-time="10">
	<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
	  <circle id="circle" class="circle-animation" r="20" cy="80" cx="80" stroke-width="10" stroke="#6fdb6f" fill="none" />
	</svg>
</div>

*{
  position:relative;margin:0 auto;padding:0;
}
#question-timer{
    position: absolute;
    left: 0;
    right: 0;
	  top:40px;
}
#question-timer svg {
    position: absolute;
    top: 50%;left: 0;right: 0;
    transform: translateY(-50%) rotate(-90deg);
}
#question-timer .circle-animation{
    stroke-dasharray: 125; /* this value is the pixel circumference of the circle (2*pi*r) */
    stroke-dashoffset: 125;
    transition: all 0.1s linear;
}
#question-timer:before {
    content: attr(data-time);
    position: absolute;
    display: block;
    top: 50%;left: 0;right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    font-size: 22px;
}

function runTime(i_max, callback){
	var time = 0;
	var initialOffset = 0;
	var i = i_max;

	var interval = setInterval(function(){
		document.querySelector('#question-timer').dataset.time = Math.ceil(i);
		document.querySelector('.circle-animation').style.strokeDashoffset = 125-(125*(i/i_max));
		if (i <= time){
			document.querySelector('.circle-animation').style.strokeDashoffset = 125;
			clearInterval(interval);
			if (typeof callback === "function") {
				callback();
			}
			return;
		}
		i -= 0.1;
	}, 100);
}

runTime(25, null);