html流程svg动画,html – SVG圈动画

这是一个

fiddle example.

注意：我使用r = 57,因为周长是358.1,接近360度.对于不同的r值,您需要计算stroke-dasharray

非常感谢@Robert Longson,@ErikDahlström和@Phrogz多年来的SO解决方案.

这个小提琴只是他们的一个调整.

(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%