使用SVG实现圆环loading动画

画圆

用SVG画一个圆先。

html:
<svg class="load" viewBox="25 25 50 50">
    <circle class="loading" cx="50" cy="50" r="20" fill="none" />
</svg>

.load {
    width: 80px;
    height: 80px;
}
.loading {
    stroke: rgb(53, 157, 218);
    stroke-width: 5;
    fill: none;
 }

效果是这样的：

用SVG画圆

动画

定义一个动画并使用。

@keyframes dash {
   0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 130, 200;
      stroke-dashoffset: -50;
    }
    100% {
      stroke-dasharray: 130, 200;
      stroke-dashoffset: -188;
    }
}
.loading {
    stroke: rgb(53, 157, 218);
    stroke-width: 5;
    fill: none;
    animation: dash 1.5s linear infinite;
 }

效果变成这样：

旋转

最后给动画添加上旋转的效果。

@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
.load {
    animation: rotate 2s linear infinite;
}

最终的效果：

原理

主要利用 SVG 绘制一个圆形，结合其 stroke 属性，最后加上一些 css3 中的动画，实现最终的 loading 动画效果。
　　绘制圆形时，使用 SVG <circle> 标签,下面是 SVG 代码：

<svg class="load" viewBox="10 10 80 80">
    <circle class="loading" cx="50" cy="50" r="30" />
</svg>

• cx, cy：定义圆点的 x 和 y 坐标，默认为(0,0)；
• r：定义圆形的半径；
• viewBox="x, y, width, height"：x：左上角的横坐标，y：左上角纵坐标，width：宽度，height：高度。这个就像qq截图，x，y 是选中的起始点，width 和 height 是选择截图的宽度和高度。viewBox 区域会铺满 SVG，所以可以定义 SVG 的大小，来限制 viewBox 的大小。

绘制好圆形，使用SVG的 stroke 属性，来自定义描边样式。常见的 stroke 属性有：

• stroke：定义描边的颜色；
• stroke-width：定义描边的宽度；
• stroke-dasharray：用于创建虚线描边；

stroke-dasharray: 10, 10;

• stroke-dashoffset：定义描边的起始位置；

stroke-dashoffset:10;

• stroke-linecap：定义描边端点的样式；

  
  图片来自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)

• stroke-linejoin：定义两个描边线段之间连接方式；

  
  图片来自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)
• stroke-opacity：定义描边的透明度；

利用这些stroke属性，定义前面出现的@keyframes dash、@keyframes rotate，就可以达到我们想要的效果了。