在本教程中，我们将利用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项目创建快速且像素完美的加载动画。
如果你喜好这篇文章，请给我点赞，收藏，转发，这是对我真的很主要
关注我长期分享前端小技巧
