用h5+SVG+js+css实现动态圆环进度

方式一

h5代码

 <svg width="300" height="300"> 　
        <circle cx="150" cy="150" r="100" class="circle1" />
        <circle cx="150" cy="150" r="100" class="circle2" transform="rotate(-90,150,150)" id="circle2Id"
            stroke-dasharray="0,10000" />
        <text x="150" y="150" class="process-text" fill="red" font-size="50">0%</text>
    </svg>

JS

 var progressDom = document.querySelector(".circle2")
    var textDom = document.querySelector(".process-text")
    function rotateCircle(persent) {
        // 获取圆环长度
        var circleLength = 2 * Math.PI * parseFloat(progressDom.getAttribute("r"))
        // 按百分比算圆环长度
        var value = persent * circleLength / 100
        console.log('value-->', value)
        // 渲染
        progressDom.setAttribute('stroke-dasharray', value + ',10000')
        textDom.innerHTML = persent + "%"
    }
    // 调用
    var num = 0
    var timer = setInterval(() => {
        num++
        if (num === 100) {
            // num = 0
            clearInterval(timer)
        }
        rotateCircle(num)
    }, 30)

css

 .circle1 {
        fill: none;
        stroke-width: 20;
        stroke: #e2e2e2;
        stroke-linecap: round;
    }

    .circle2 {
        fill: none;
        stroke-width: 20;
        stroke: pink !important;
        stroke-linecap: round;
        /* stroke-dasharray: 0, 1000; */
        /* transform: rotate(-90,350,350); */
        /* stroke-dashoffset: 0; */
    }

    .process-text {
        text-anchor: middle;
        dominant-baseline: middle;
    }

方式二：

h5:

<div class="container">
        <p>一个动态圆环</p>
        <svg width="150" height="150">
            <g>
                <circle cx="60" cy="60" r="50" stroke-width="10" stroke="#ccc" fill="none" />
                <circle cx="60" cy="60" r="50" stroke-width="10" stroke="red" fill="none" class="process"
                    transform="rotate(-90,60,60)" />
            </g>
        </svg>
    </div>

css

.container {
        border-bottom: 1px solid #ccc;
        position: relative;
    }

    p {
        font-size: 14px;
        padding-left: 10px;
    }

    .process {
        stroke-dasharray: 0 500;
        stroke-linecap: round;
        animation: processAnimate 3s linear infinite;
    }

    @keyframes processAnimate {
        to {
            stroke-dasharray: 314 500
        }
    }