前端SVG简单实现圆弧进度条

 

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="566.93px" height="566.93px" viewBox="0 0 566.93 566.93" enable-background="new 0 0 566.93 566.93" xml:space="preserve">

    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M19.32,119.5C7.342,106.809-0.001,89.695-0.001,70.866
    C-0.001,31.728,31.727,0,70.865,0s70.866,31.728,70.866,70.866c0,18.83-7.344,35.944-19.324,48.635"/>
    <path fill="#FFFFFF" 
          stroke="#ff00ff"
          stroke-miterlimit="10"
          stroke-linejoin="round" 
          stroke-linecap="round" 
          stroke-dasharray="330"
          stroke-width="5"
          
          stroke-dashoffset="330" 
          d="M19.32,119.5C7.342,106.809-0.001,89.695-0.001,70.866
    C-0.001,31.728,31.727,0,70.865,0s70.866,31.728,70.866,70.866c0,18.83-7.344,35.944-19.324,48.635"/>
</svg>
 
</body>

 

更改  stroke-dashoffset 值范围为（0-330） 值越小占得越大