无需为从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项目创建快速且像素完美的加载动画。
如果你喜欢这篇文章，请给我点赞，收藏，转发，这是对我真的很重要
关注我长期分享前端小技巧
,
