纯SVG实现进度圈

进度圈是经典的仪表盘元素,可以将统计数据直观地展现为摘要视图。我们可以通过javascript+canvas+css,图片或者利用SVG实现一个进度圈。

See the Pen SVG Progress Circle - Sass by Airen (@airen) on CodePen.

使用SVG实现一个进度圈并没有想象中那么难,我们先从基本的开始:

1.-创建背景

首先,创建一个半径为90px的圆形,然后使用cx,cy设置圆心在svg中的位置。
我在这里还添加了一些样式属性,比如3px的灰色轮廓。

1
2
3
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<circle r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/>
</svg>

背景圆效果图

2.-添加进度效果

现在需要在刚才的背景上再添加一个表示进度的圆形:

1
2
3
4
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<circle id="backdrop" r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/>
<circle id="progress" r="90" cy="120" cx="120" stroke-width="4" stroke="red" fill="none"/>
</svg>

好了,现在我们已经画好了需要的两个圆,可以想象,100%可以用一个全红的圆形表示,但是,如果我想表示一个具体的百分比呢?

3.-stroke-dasharray与stroke-dashoffset

接下来需要书写CSS,SVG提供了stroke-dasharraystroke-dashoffset两个属性,它们可以将刚才的圆形的轮廓变成虚线。如果两个属性都被设置成100px,会有下面的效果:

1
2
3
4
#progress {
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
}

应用``stroke-dasharray`` ``stroke-dashoffset``

然后,我们可以使用keyframe为其添加一些动画:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#progress {
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
animation: progressAnimation 600ms linear infinite;
}
@keyframes progressAnimation {
from {
stroke-dashoffset: 100px;
}
to {
stroke-dashoffset: 300px;
}
}

添加动画后的效果

4.-实现具体百分比的表示

到目前为止,动画效果,进度圆和背景圆都已经完成,最后的工作就是使用stroke-dashoffset stroke-dasharray将给定的百分比表示出来,这可能会涉及到数学方面的知识。

在这里我们使用Sass完成这项工作,当然,利用javascript+CSSDOM这个组合也可以实现我们想要的效果(可以处理浮点数的情况)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$radius: 90;
$percent: 83;
$circumference: (pi() * (2 * $radius));
$stroke_percentage: $circumference - (($percent / 100) * $circumference);
#progress {
stroke-dasharray: $circumference;
stroke-dashoffset: $circumference;
}
#progress {
animation: progressAnimation 1600ms linear 500ms forwards;
transition: stroke-dasharray 400ms linear;
}
@keyframes progressAnimation {
to {
stroke-dashoffset: $stroke_percentage;
}
}

首先,我们设置了一些需要用到的变量,$radius(圆的半径),percent(需要展示的百分比),$circumference(圆的周长)。

接下来,对$circumference做减法算出stroke-dashoffset的值。

如果你尝试运行这个例子,会发现圆的进度条会以3点钟方向为起点,为了修正这个问题,我们需要将整个SVG 逆时针旋转90°

完成

我添加了一些其它的效果,这些效果多少也都会涉及一些数学知识。

See the Pen SVG Progress Circle - Sass by Airen (@airen) on CodePen.

如果你有任何的问题,可以在文章下面留言。另外,在前面示例的基础上采用一些JavaScript代码来处理进度条百分比的效果:

See the Pen SVG Progress Circle JS by Airen (@airen) on CodePen.

0%