Skip to main content

SVG 实现环形进度条

一、SVG 中的圆形​

SVG 中通过 circle 标签来绘制一个圆，其中：

  • cx 和 cy 属性为圆心的 x、y 坐标。默认为 0
  • r 是圆的半径，不包括圆的边框宽度
  • fill 是填充颜色，默认为黑色

二、环形的实现​

1、实线环​

在圆形的基础上，将 fill 设为 none，并加上边框，其中：

  • stroke 边框颜色
  • stroke-width 边框宽度，默认为 1
注意

这里设置的 stroke 边框相当于盒子模型中的标准模型：

box-sizing: content-box;

即边框宽度会在原有的圆半径 r 上叠加，而不是算入半径中，因此需要对原半径 r 的值减去 stroke-width / 2

2、虚线环​

在实线环的基础上，设置 stroke-dasharray 即可设为虚线环。其中：

三、环形进度条的实现​

1、静态环形进度条​

环形进度条的原理是在实线环上叠加一个虚线环，并通过 stroke-dashoffset 来调整进度，其中：

  • stroke-dasharray：将虚线间距设为圆的周长 → (π × d)
  • stroke-dashoffset：将起始点距离设为圆的周长乘 1 减进度比 → (π × d) × (1 - p)

这里以 30% 的进度为例，即 p = 0.3：

注意

这里要对 svg 设置 -90° 的一个旋转。

2、加载中的环形进度条​

可通过给环形进度条添加动画，实线加载中的效果，为了使动画足够平滑，需要将 stroke-dashoffset 的值设为两倍周长：

点击查看更多圆环相关动画