使用SVG实现圆环loading动画

画圆

用SVG画一个圆先。

html:

    

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

效果是这样的:


使用SVG实现圆环loading动画_第1张图片
用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;
 }

效果变成这样:

使用SVG实现圆环loading动画_第2张图片

旋转

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

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

最终的效果:

使用SVG实现圆环loading动画_第3张图片

原理

主要利用 SVG 绘制一个圆形,结合其 stroke 属性,最后加上一些 css3 中的动画,实现最终的 loading 动画效果。
  绘制圆形时,使用 SVG 标签,下面是 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;
使用SVG实现圆环loading动画_第4张图片
  • stroke-dashoffset:定义描边的起始位置;
stroke-dashoffset:10;
使用SVG实现圆环loading动画_第5张图片
  • stroke-linecap:定义描边端点的样式;


    使用SVG实现圆环loading动画_第6张图片
    图片来自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)
  • stroke-linejoin:定义两个描边线段之间连接方式;


    使用SVG实现圆环loading动画_第7张图片
    图片来自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)
  • stroke-opacity:定义描边的透明度;

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

你可能感兴趣的:(使用SVG实现圆环loading动画)