SVG實(shí)現(xiàn)環(huán)形進(jìn)度條的原理
代碼非常簡(jiǎn)單：
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動(dòng)畫控制：
svg {transform: rotate(-90deg);}.progress {animation: rotate 1500ms linear both;}@keyframes rotate {from {stroke-dashoffset: 471px;}to {stroke-dashoffset: 0px;}}
實(shí)現(xiàn)原理
let path = document.querySelector('#path');// 可獲取路徑的長(zhǎng)度let len = path.getTotalLength();path.style.cssText = `stroke-dasharray:"${number}"`;
本文完~
??愛(ài)心三連擊
1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的「點(diǎn)贊，在看」是我創(chuàng)作的動(dòng)力。
2.關(guān)注公眾號(hào)
程序員成長(zhǎng)指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開(kāi)發(fā)者，會(huì)討論 Node 知識(shí)，互相學(xué)習(xí)」！3.也可添加微信【ikoala520】，一起成長(zhǎng)。
“在看轉(zhuǎn)發(fā)”是最大的支持
評(píng)論
圖片
表情