三种loading制作方案(代码片段)

关键词：

一、简介

Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。

二、通过border-radius绘制圆环

我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。

<div class="loading-css"></div>

.loading-css 
    width: 50px; /*先将loading区域变成正方形*/
    height: 50px;
    display: inline-block; /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/
    border: 3px solid #f3f3f3; /*设置四周边框大小，并将颜色设置为浅白色*/
    border-top: 3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/
    border-radius: 50%; /*将边框和内容区域都变成圆形*/

此时效果如下:

圆环效果已经出来了，接下来让圆环旋转起来即可，如:

@keyframes loading-360 
    0% 
        transform: rotate(0deg); /*动画起始的时候旋转了0度*/
    
    100% 
        transform: rotate(360deg); /*动画结束的时候旋转了360度*/
    

.loading-css  /*在之前的CSS中加上动画效果即可*/
    animation: loading-360 0.8s infinite linear; /*给圆环添加旋转360度的动画，并且是无限次*/

二、通过svg来绘制圆环

SVG 意为可缩放矢量图形（Scalable Vector Graphics），其使用 XML 格式定义图像，<circle> 标签可用来创建一个圆，同时外面必须嵌套一个<svg>标签。

<svg viewBox="0 0 50 50" class="loading-svg">
    <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
</svg>

.loading-svg 
    width: 50px; /*设置svg显示区域大小*/
    height: 50px;

<svg>标签的width和height设置的是svg图形可显示区域大小。而viewBox表示的是截取图形的区域，因为矢量图的绘制区域可以是无限大的，具体绘制在哪里根据具体的设置而定，比如上面的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，所以整个圆也会跟着变大。

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

.path 
    stroke: #409eff; /*给画笔设置一个颜色*/
    stroke-width: 2; /*设置线条的宽度*/

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

.path 
    stroke-dasharray: 95, 126; /*设置实现长95，虚线长126*/
    stroke-dashoffset: 0; /*设置虚线的偏移位置*/

如图所示，圆环的绘制起点是在水平方向最右边的那个点，然后进行顺时针绘制。因为该圆环的周长为23.1420=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，并作为元素内容。

<link rel="stylesheet" href="icon/iconfont.css">
<style>
.icon-loading 
    display: inline-block; /*需要设置为行内块元素动画才会生效*/
    font-size: 56px; 
    color: grey;

.icon-loading::before 
    content: "\\e65b"; /*显示字体图内容，值为\\unicode*/

</style>
<i class="icon-loading iconfont"></i>
<!--或者-->
<i class="iconfont">&#xe65b</i><!--值为&#xunicode-->

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

.icon-loading 
    animation: rotating 2s infinite linear;

@keyframes rotating 
    0% 
        transform: rotate(0deg) /*动画起始位置为旋转0度*/
    

    to 
        transform: rotate(1turn) /*动画结束位置为旋转1圈*/
    

vscode:platformio主页一直显示loading解决方案(代码片段)

VSCode:PlatformIO主页一直显示loading解决方案Github问题描述：CouldnotstartPIOHomeserver:Error:timeout#205在vscode中打开platformio点击进入主页时，PIOHome一直处于加载状态主页上一直显示loading。在左下方的状态栏中提示PlatformIOIntelliSenseIn... 查看详情

三种跨域解决方案(代码片段)

...，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：Nginx代理这种方式比较简单，将A应用和B应用都通过一个统一的地址进行转发，这样就可以避免跨域问题出现。 serverlisten80;se... 查看详情

layer.load的使用(代码片段)

...透明度的白色背景);1这个参数的位置是代表风格有012 三种风格如果超过2那么就默认是第一种风格 然后第二个参数:shade(阴影) 查看详情

游戏开发实战unity使用shadergraph制作一个loading水球（能量球|ui|2d|特效|urp）(代码片段)

文章目录一、前言二、ShaderGraph入门三、ShaderGraph制作2DLoading水球1、创建UnlitShaderGraph2、创建一个圆3、从下到上填充的效果4、填充效果与圆相乘5、填充边界波浪效果6、水球颜色7、输出到片元着色器8、再加一点点细节四、应用... 查看详情

游戏开发实战unity使用shadergraph制作一个loading水球（能量球|ui|2d|特效|urp）(代码片段)

文章目录一、前言二、ShaderGraph入门三、ShaderGraph制作2DLoading水球1、创建UnlitShaderGraph2、创建一个圆3、从下到上填充的效果4、填充效果与圆相乘5、填充边界波浪效果6、水球颜色7、输出到片元着色器8、再加一点点细节四、应用... 查看详情

jquery的load加载本地文件出现跨域错误的解决方案(代码片段)

如果用原生的AJAX是加载本地文件就不会出现错误。当然，这个jquery的load放在服务器上通过http加载还是支持的。也有例外比如在firefox和ie浏览器使用$.ajax加载本地html或txt文件时,不会报错。当其他浏览器控制台弹出下面报错，表... 查看详情

androidgradle三种自定义插件方式详解（含报错解决方案）(代码片段)

Gradle是什么？Gradle是一个自动化构建开源工具。Gradle运行在JVM中，执行Gradle就相当于开启了一个Java程序。创建Gradle的三种方式 方式一：Buildscript脚本方式applyplugin:MyPluginclassMyPluginimplementsPlugin<Project>@Overridevo 查看详情

三种uiscrollview嵌套实现方案(代码片段)

...经历了几次重构后，有了些改进的经验，因此抽空整理了三种方案，他们实现的最终效果都是一样的。分而治之最常见的一种方案就是使用UITableView作为外部框架，将子视图的内容通过UITableViewCell的方式展现。这种做法的好处在... 查看详情

使用shader制作loading旋转动画(代码片段)

效果图： 1.绕Z轴旋转的旋转矩阵2.UV旋转的步骤　　(1)由于旋转矩阵是绕原点旋转的，要把要旋转的UV坐标平移到原点　　1i.uv-=float2(0.5,0.5);2float2tempUV=i.uv;　　（2）旋转UV坐标　　　1i.uv.x=cos(_Speed*_Time.y)*tempUV.x-sin(_Speed*_Time.y)*... 查看详情

ugui更换图片的三种方法(代码片段)

//方法一：Image/pic在Assets/Resources/目录下Image_myImage;voidStart()_myImage.sprite=Resources.Load("Image/pic",typeof(Sprite))asSprite;//方法二：mySprite为外部指定的图片资源Image_myImage;Sprite_ISprite;voidStart()　　_my 查看详情

python爬虫过程中验证码识别的三种解决方案(代码片段)

...文中将会更多介绍爬虫问题的解决方案。本篇推文将分享三种解决验证码的方法，如果你有比较好的方案， 查看详情

mybatis传多个参数（三种解决方案）mapper.xml的sql语句修改！(代码片段)

第一种PublicUserselectUser(Stringname,Stringarea);对应的Mapper.xml  <selectid="selectUser"resultMap="BaseResultMap">select*fromuser_user_twhereuser_name=#0anduser_area=#1</select>其 查看详情

二维数组5：矩阵置零的三种解法(代码片段)

 leetcode73，给定一个mxn的矩阵，如果一个元素为0，则将其所在行和列的所有元素都设为0。进阶：一个直观的解决方案是使用 O(mn)的额外空间，但这并不是一个好的解决方案。一个简单的改进方案是使用O(m+... 查看详情

java程序制作docker镜像推荐方案(代码片段)

文章目录背景制作条件Dockerfile指令：实践步骤使用官网提供的基础镜像作为镜像基础设定容器的正确的时间和时区容器中采用非root用户权限启动应用程序DockerFile样例COPY与ADD区别举个栗子背景随着我们分布式的观念在各个领... 查看详情

聊聊分库分表后非shardingkey查询的三种方案～（建议收藏）(代码片段)

大家好呀，我是飘渺！通过上篇文章我们知道了一个结论：那就是对于toC的业务来说，需要选择用户属性如user_id作为分片键。那问题来了，对于订单表来说，选择了user_id作为分片键以后如何查看订单详情... 查看详情

这两个车模制作方案为什么这么相似？(代码片段)

 §01相似方案  卓大，为什么华北赛区和西部赛区的视觉组会出现一模一样的方案？这是否有点…我不认为两个人不串通可以设计出一模一样的方案。我说的方案是选手设计的比赛方案，两个不同赛区的队伍确做出... 查看详情

react传参的三种方案(代码片段)

...,id);/*<!--也可以取自定义参数,也可以有e,但是要慎用第三种不好,每次渲染LoggingButton时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为prop传入子组件时，这些组件可能会进行额外的重新渲染... 查看详情

python笔记：load_extautoreload(代码片段)

...须在笔记本环境中重新加载模块。    一种简单的解决方案:使用autoreload来确保使用的是模块的最新版本。    我们可以通过以下方式来重新加载最新模块%load_extautoreload%autoreload2每次执行一些代码时&#x 查看详情