SVG實(shí)現(xiàn)環(huán)形進(jì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動畫控制：
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');// 可獲取路徑的長度let len = path.getTotalLength();path.style.cssText = `stroke-dasharray:"${number}"`;
本文完~
評論
圖片
表情