svg实现环形进度条

svg实现环形进度条

很多时候,我们需要自己实现一个环形进度条,现有UI框架不满足需求的时候,我们就可以使用svg来自己实现一个。效果如图:

企业微信截图_16339284821755.png

svg相关知识

详情查看 SVG | MDN (mozilla.org),这里简单解释

这一次需要用到的svg元素:

  • defs:定义需要重复利用的图形元素
  • linearGradient:定义线性渐变,用来图形元素的填充或描边使用
  • stop:元素或者元素的子元素,用来描述渐变色的坡度
  • circle:基于圆心和半径创建圆形

需要用到的svg属性:

  • cx:定义中心点的x坐标
  • cy:定义中心点的y坐标
  • r:定义圆的半径
  • fill:(对于形状元素)用来定义内部颜色
  • stroke:图形外轮廓颜色
  • stroke-width:外轮廓宽度
  • stroke-dasharray:描边的点划线的图案范式(线段,直线。。。)
  • stroke-linecap:开放自路径两端的形状(平角,圆角)
  • transform:用来设置动画(非svg属性)

1. 定义一个可复用的渐变色

<defs>
    <linearGradient id="color">
        <stop offset="0%"  stop-color="#229453"/>
        <stop offset="50%"  stop-color="#66c18c"/>
        <stop offset="100%" stop-color="#b9dec9"/>
    </linearGradient>
</defs>
复制代码

2. 增加一个外圈的圆,用来包住进度条(旋转整个圆,使缺口朝下)

<circle cx='160' cy='160' r='140' stroke='#999999' stroke-width="20" fill="none" stroke-dasharray="659,300" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>
复制代码

3. 增加一个内部的圆,当进度条背景

<circle cx='160' cy='160' r='140' stroke='pink' stroke-width="10" fill="none"  stroke-dasharray="659,300" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>
复制代码

4. 增加进度条的圆(动画是为了有进度条移动的效果)

<circle id="circle" cx='160' cy='160' r='140' stroke='url(#color)' stroke-width="10" fill="none" style="stroke-dasharray: 0,900; transition: stroke-dasharray 2s" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>
复制代码

5. 写一点js代码来改变进度条长度

const circle = document.getElementById('circle')
setTimeout(()=> {
  circle.style.strokeDasharray = '600,500'
}, 2000)
复制代码

查看完整代码 svg 环形进度条 (codepen.io)

分类:
前端
标签: