SVG实现环形进度条的原理
程序员成长指北
共 994字,需浏览 2分钟
·
2020-11-14 21:29
代码非常简单:
height="150px" class="svg">
<circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
<circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="471px" />
svg>
为了便于演示,我们先用css动画控制:
svg {
transform: rotate(-90deg);
}
.progress {
animation: rotate 1500ms linear both;
}
@keyframes rotate {
from {
stroke-dashoffset: 471px;
}
to {
stroke-dashoffset: 0px;
}
}
实现原理
let path = document.querySelector('#path');
// 可获取路径的长度
let len = path.getTotalLength();
path.style.cssText = `stroke-dasharray:"${number}"`;
本文完~
❤️爱心三连击
1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
2.关注公众号
程序员成长指北
,回复「1」加入Node进阶交流群!「在这里有好多 Node 开发者,会讨论 Node 知识,互相学习」!3.也可添加微信【ikoala520】,一起成长。
“在看转发”是最大的支持
评论