关于css:三种Loading制作方案

3次阅读

共计 4221 个字符，预计需要花费 11 分钟才能阅读完成。

Loading 简直是每个利用都会用到的一个组件。很多组件库都会提供相应的 Loading 组件，然而有的时候咱们可能 须要自定义 Loading 成果 ，把握 Loading 组件制作的基础知识将变得十分必要。Loading 次要就是 一个旋转的圆环 ，而旋转局部则比较简单，间接通过 CSS 动画即可实现，所以 要害局部就是失去 Loading 的圆环。

咱们通常让一个元素变成圆形是先 将一个元素设置为长和宽相等的正方形 ，而后 给这个元素设置一个 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 意为 可缩放矢量图形 （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; /* 设置虚线的偏移地位 */
}

如图所示，圆环的绘制终点是 在程度方向最左边的那个点 ，而后进行 顺时针 绘制。因为该圆环的周长为 2 3.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 网站上下载喜爱的 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 圈 */
    }
}

正文完