html5 svg 圆形进度条

时间：2022-02-21 22:07:20

html5 svg 圆形进度条

<!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>

相关文章