使用 SVG 和 CSS 创建加载动画

为你的 Web 项目创建加载动画的最佳方法之一是，无需从 Web 服务器、外部 CDN 或第三方 JavaScript 插件加载资源，而是使用与渲染动画相同的 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;
  }
}

上面的 CSS 代码是这样的。
当我们绘制圆形时，它只是用一条虚线从圆的起点到终点勾勒出形状的轮廓。stroke -dasharray属性让我们能够将其分解成虚线和空隙的图案。我们可以利用这个特性来获得我们想要的动画效果。

为了实现如上图所示的流畅动画效果，我们需要知道圆的周长，即周长 = 2 x pi x半径。然后，我们使用stroke-dasharray属性绘制最多一条虚线和一条间隙，并在动画的不同状态下交替改变它们的大小，同时在两者相加时保持圆周长度不变。

圆的半径为 45，我们得到的圆周率为 282.6，因此当我们将stroke-dasharray值设置为 141.3 时，这意味着虚线和间隙具有相同的值，它们相加得出的总和为 282.6。

stroke -dashoffset属性是一个表示属性，用于定义关联虚线数组渲染时的偏移量。此偏移量会赋予加载动画旋转效果，否则动画会显得不完整。这就是fill-animation动画的全部内容。最后，我们使用.animation
类将此动画应用于第二个圆圈，以确保动画无限循环。

这只是使用 SVG 和 CSS 制作的动画类型的基础，通过实验和创意为您的 Web 项目创建快速且像素完美的加载动画。

文章来源：https://dev.to/xinnks/create-loading-animations-with-svg-and-css-1d0p