【拓展】SVG实现环形进度条的原理
前端自习课
共 1063字,需浏览 3分钟
·
2020-11-01 17:34
代码非常简单:
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}"`;
本文完~
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 80+ 篇原创文章
评论