526互联

html5 svg 圆形进度条

发布时间 2023-05-07 22:23:49作者: 哩个啷个波
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5中的SVG属性实现圆形进度条效果</title>
    <style>
        #a{color:red;}
    </style>
</head>
<body>
<svg width="440" height="440">
    <text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text>
    <circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>
    <circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"
            transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>
</svg>
<script>
    var circle = document.getElementById("c1");
    var a = document.getElementById("a").innerHTML;
    var b=parseInt(a)/100;
        var percent = 0, perimeter = Math.PI * 2 * 170;
    setInterval(function () {
        if(percent<b){
            circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
            percent+=1/100;
        }
    },100);

</script>
</body>
</html>