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

方式一

js+css+svg

h5代码

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;
    }

方式二：

css+svg

h5:

        
一个动态圆环
        
    

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