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