用svg實現一個環形進度條
阿新 • • 發佈:2019-04-07
inf das lin pat eight off bsp path alt
svg實現環形進度條需要用到的知識:
1、會使用path的d屬性畫一個圓環
2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset
話不多說,直接上代碼
<div style="width: 200px;height: 200px;"> <svg viewBox="0 0 100 100"> <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#e5e9f2" stroke-width="5"> ></path> <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#20a0ff" stroke-linecap="round" class="my-svg-path" transform="rotate(90,50,50)" stroke-width="5"> </path> </svg> </div>
.my-svg-path{ stroke-dasharray: 252.2px, 252.2px; stroke-dashoffset: 22px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s; transform: rotateZ(90deg); transform-origin: 50% 50%; }
效果:
用svg實現一個環形進度條