javascript - 倒数计时器加载器动画

Question

圆形轮廓在计时器结束前完成。虽然它在较大的圆圈时工作正常。 fiddle

var time = 10;
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);

svg {
    transform: rotate(-90deg);

}

.circle_animation {
  stroke-dasharray: 440; 
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="25" cy="35" cx="35" stroke-width="4" stroke="#6fdb6f" fill="#ccc"/>
     </g>
    </svg>
</div>

Answer 1

你必须在 css 和 javascript 中减少偏移量，我在那里更新了你的代码: http://jsfiddle.net/3recj0s9/

CSS:

.circle_animation {
  stroke-dasharray: 155; 
  stroke-dashoffset: 155;
  transition: all 1s linear;
}

JS

var initialOffset = '155';