51dev.com IT技术开发者社区

51dev.com 技术开发者社区

使用SVG实现圆环loading动画

IT猿阅读(32)2019-10-30 收藏0次评论

画圆

  用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;
 }

  效果是这样的:

动画

  定义一个动画并使用。

@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 标签,下面是 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:定义描边端点的样式;
  • stroke-linejoin:定义两个描边线段之间连接方式;
  • stroke-opacity:定义描边的透明度;

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

以上就是使用SVG实现圆环loading动画的全部内容。