前端小姐姐保姆级教你使用SVG和CSS创建加载动画

无需为从Web服务器，外部CDN或第三方Javascript插件中加载资产而为Web项目创建加载动画的最佳方法之一，就是使用与渲染相同的Web技术在Web应用程序中创建动画。
这样可以确保动画在你需要时立即显示，并确保用户体验不会因用户连接速度而受到影响。

在本教程中，我们将使用HTML和CSS为Web项目制作一个简单的加载动画。

我们追求的最终结果是以下动画。

添加以下html模板：

<div class="svg-loader">
    <svg class="svg-container" height="100" width="100" viewBox="0 0 100 100">
        <circle class="loader-svg bg" cx="50" cy="50" r="45"></circle>
        <circle class="loader-svg animate" cx="50" cy="50" r="45"></circle>
    </svg>
</div>

从上面的插图可以明显看出，动画模板由两个圆圈组成，一个圆圈在另一个圆圈的上方，第一个圆圈的厚度大于第二个圆圈的圆圈，两个圆圈都具有相同的圆周，从而使一个圆圈在另一个圆圈内的错觉。

圆内的cx和cy属性分别是两个圆的x轴和y轴坐标。他们确保两个圆以同一坐标为中心。

添加以下css：

.svg-loader{
  display:flex;
  position: relative;
  align-content: space-around;
  justify-content: center;
}
.loader-svg{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  fill: none;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke: rgb(64, 0, 148);
}
.loader-svg.bg{
  stroke-width: 8px;
  stroke: rgb(207, 205, 245);
}

上面的css确保加载组件位于容器的中心，并确保两个圆具有不同的笔触宽度和颜色。

然后，我们用CSS动画第二个圆，该圆将位于第一个圆的顶部，以完成加载动画：

.animate{
  stroke-dasharray: 242.6;
  animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
}

@keyframes fill-animation{
  0%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 141.3;
    stroke-dashoffset: 141.3;
  }
  100%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 282.6;
  }
}

当我们绘制圆时，它只是一个单点划线，画出了从圆头到圆的形状轮廓，stroke-dasharray属性使我们能够将其分解为点划线和间隙。我们可以利用此功能来获得所需的动画最终结果。

为了获得如上所示的平滑动画效果，我们需要知道圆的圆周，其中圆周= 2 x pi x radius。然后，我们使用stroke-dasharray属性在动画的不同状态下绘制最多一个破折号和间隙，以交替改变其大小，同时在添加两者时保持圆周长度。

圆半径为45时，周长为282.6，因此将stroke-dasharray的值设置为141.3时，意味着虚线和间隙的值相同，其总和为282.6。

dashoffset属性是定义在相关虚线数组的呈现的偏移呈现属性，该偏移给出到加载动画的旋转作用，否则动画将出现破裂。这就是填充动画动画中发生的所有事情。
我们通过使用.animation类将动画应用于第二个圆环来确保该动画无限进行。

这只是使用SVG和CSS可以制作动画的基础，可以进行实验性和创造性的创作，从而为你的Web项目创建快速且像素完美的加载动画。

如果你喜欢这篇文章，请给我点赞，收藏，转发，这是对我真的很重要

关注我长期分享前端小技巧