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

方式一

js+css+svg

h5代码

stroke-dasharray="0,10000" />

0%

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:

一个动态圆环

transform="rotate(-90,60,60)" />

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

}

}