2024年最全前端技巧：三种 Loading 制作方案，2024年最新面试进阶100题网盘

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

，比如上面的circle就绘制在圆心坐标为(25,25)，半径为20的圆形区域中，而viewBox设置为0 0 50 50，表示截图区域为左上角坐标为(0, 0)，右下角坐标为(50,50)的矩形区域内，即会截取这个区域内的矢量图，然后将截取的矢量图放到svg的可显示区域内，同时会根据svg可显示区域的大小等比例进行缩放，但是截取的图片必须在svg可显示区域内完整显示。

假如，现在讲svg的大小设置为60px，如:

.loading-svg {

width: 60px; /设置svg显示区域大小/

height: 60px;

}

如上分析，viewBox截图区域中，绘制的圆的圆心正好在截图区域的中心，所以截图区域四周边框与绘制的圆之间有5px的距离，而圆的半径为20px，所以比例为1:4，现在将svg显示区域变为60px，所以也需要将截图区域等比例放大并占满整个svg显示区域，截图区域经过拉伸后，圆心位置变为了(30,30)，即半径变为了30，按1:4比例，半径变为24，外围变为了6，所以整个圆也会跟着变大。

需要注意的时候，绘制的圆目前是看不到的，因为没有给画笔设置上颜色，如:

.path {

stroke: #409eff; /给画笔设置一个颜色/

stroke-width: 2; /设置线条的宽度/

}

此时可以看到绘制出的圆环了。为了给圆环添加转动效果，我们需要绘制带缺口的圆环，后面通过改变缺口的位置大小来实现转动效果，如:

.path {

stroke-dasharray: 95, 126; /设置实现长95，虚线长126/

stroke-dashoffset: 0; /设置虚线的偏移位置/

}

如图所示，圆环的绘制起点是在水平方向最右边的那个点，然后进行顺时针绘制。因为该圆环的周长为2_3.14_20=125.6，约等于126，stroke-dasharray设置了实线(可见部分)长为95，约等于圆的3/4，所以只能绘制到圆环的最高点位置，接下来是126的虚线，但是圆环周长只有126，所以只能显示31的虚线。可以看做是一根无限循环的水平线条，实线(-221,0)—虚线(-126,0)—目前起点为(0,0)—实线(95,0)—虚线(221,0)—实线(316,0)，然后让水平线的起点(0,0)位置与圆环的起点位置重合，水平线顺时针沿着圆环绕即可，随着stroke-dashoffset起点位置的偏移，左侧的(-126,0)的虚线就可以慢慢显示出来。当stroke-dashoffset值为负数的时候，上面的线往右拉，当stroke-dashoffset值为正数的时候，下面的线往右拉。

接下来就是添加圆环的转动效果，分别设置三个动画状态，如:

// 0%

{

stroke-dasharray: 1, 126; /实线部分1，虚线部分126/

stroke-dashoffset: 0; /前面1/126显示实线，后面125显示空白/

}

从圆环最右边作为起点绘制1个像素的距离的实线，接下来绘制126像素的虚线(空白)，因为圆周长为126，所以剩余部分全部为空白，如图所示，

// 50%

{

stroke-dasharray: 95, 126; /实线部分95，虚线部分126/

stroke-dashoffset: -31px; /顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条/

}

从圆环的最右边作为起点，并且顺时针移动31像素，即圆环的1/4，所以实线起点变为了圆环的最底部，实线长度为95像素，即圆环的3/4，如图所示，

// 100%

{

stroke-dasharray: 6, 120; /实线部分6，虚线部分120/

stroke-dashoffset: -120px; /最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分/

}

从圆环的最右边作为起点，并且顺时针移动120像素，所以实线长度仅剩下6像素了，如图所示，

给圆环加上动画效果，如:

.path {

animation: loading-dash 1.5s ease-in-out infinite;

}

@keyframes loading-dash {

0% {

stroke-dasharray: 1, 126; /实线部分1，虚线部分126/

stroke-dashoffset: 0; /前面1/126显示实线，后面125显示空白/

}

50% {

stroke-dasharray: 95, 126; /实线部分95，虚线部分126/

stroke-dashoffset: -31px /顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条/

}

to {

stroke-dasharray: 6, 120; /实线部分6，虚线部分120/

stroke-dashoffset: -120px; /最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分/

}

}

为了让Loading动画更加生动细腻，我们还可以给svg标签也加上一个旋转动画，如:

.loading-svg {

width: 50px; /设置svg显示区域大小/

height: 50px;

animation: loading-rotate 1.5s infinite ease-in-out; /给svg也加上一个旋转动画/

}

@keyframes loading-rotate {

to {

transform: rotate(1turn); // 旋转1圈

}

}

三、通过iconfont字体图标

我们可以直接通过iconfont字体图标代替圆环的绘制，直接以字体的形式显示出圆环，然后给其加上旋转动画即可，如：

我们可以在iconfont网站上下载喜欢的Loading图案。字体图标下载后，将解压后的内容拷贝到项目中，并引入其中的iconfont.css到页面中，给要显示字体图标的元素加上iconfont类样式，字体图标会有一个对应的unicode编码，通过::before设置content为该unicode编码即可显示对应的字体图标了，或者直接在unicode码前加上\&#x，并作为元素内容。

&#xe65b

接下来让字体图标旋转起来即可，如:

.icon-loading {

animation: rotating 2s infinite linear;

}

@keyframes rotating {

0% {

transform: rotate(0deg) /动画起始位置为旋转0度/

}

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】