纯 CSS3 实现常见的 loading 图

作者: CondorHero | 来源:发表于2020-06-19 16:46 被阅读0次

纯 CSS3 实现常见的 loading 图
CSS 各种loading 实现
Facebook loading animation using
使用CSS3实现loading动画
CSS3实现18种Loading效果
Ajax Loading Style
2019-10-09 面试
纯css3：radio+label实现轮播图
CSS3 loading加载动画
纯css实现117个Loading效果（上）

在 Antd 中常见的两个 loading 图如下，Antd 官方叫它们 Spin （旋转）。

Spin

这种 loading 图比较常见，效果也不是很难，让你写可能要思考🤔下才能写出来，今天我们就来看看怎么实现：

一、渐变梅花 ♣️ 转转

渐变梅花 ♣️ 转转

实现步骤：

一个盒子四角放四个小盒子，子绝父相。
父盒子负责旋转
四个子盒子都有延迟渐变，加起来一共两个动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>渐变梅花 ♣️ 转转</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ant-spin-dot {
        position: relative;
        width: 20px;
        height: 20px;
        animation: antRotate 1.2s linear 0s infinite;
    }

    .ant-spin-dot i {
        width: 9px;
        height: 9px;
        border-radius: 100%;
        background-color: #1890ff;
        transform: scale(.75);
        display: block;
        position: absolute;
        opacity: 0.3;
        transform-origin: 50% 50%;
        animation: antSpinMove 1s linear 0s infinite alternate;

    }

    i:nth-child(1) {
        left: 0;
        top: 0;
    }

    i:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
    }

    i:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
    }

    i:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
    }

    @keyframes antSpinMove {
        to {
            opacity: 1;
        }
    }

    @keyframes antRotate {
        to {
            transform: rotate(360deg);
        }
    }
    </style>
</head>

<body>
    <span class="ant-spin-dot">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </span>
</body>

</html>

二、小小圆圈⭕️loading

1/4 圆作为 loading 效果：

3/4 圆作为 loading 效果：

这个太简单了，有两种 loading 效果，一种是 1/4 圆作为 loading 效果，另一种是 3/4 作为 loading 效果，我更喜欢 3/4 的效果：

1/4 圆作为 loading 效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        border: 2px solid transparent;
        border-top-color: #1890ff;
        animation: loading 1.2s ease-in-out 0s infinite;
    }

    @keyframes loading {
        to {
            transform: rotate(360deg);
        }
    }
    </style>
</head>

<body>
    <span class="loading"></span>
</body>

</html>

3/4 圆作为 loading 的效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        border: 2px solid #1890ff;
        border-top-color: transparent;
        animation: loading .75s ease-in-out 0s infinite;
    }

    @keyframes loading {
        to {
            transform: rotate(360deg);
        }
    }
    </style>
</head>

<body>
    <span class="loading"></span>
</body>

</html>

三、波纹 loading 图

这个难点在波纹，常见的播放器波纹等都是通过 animation 的 delay 来实现的。

波纹 loading 图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>加载中loading效果</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body,html{
        height: 100vh;
        background: #222;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        display: flex;
    }

    .container i {
        width: 1em;
        height: 1em;
        border-radius: 50%;
        /* 实现圆形 */
        background: #fff;
        margin: 0.3em;
        user-select: none;
        position: relative;
    }

    .container i::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: inherit;
        /* 从父元素继承背景颜色 */
        border-radius: inherit;
        /* 从父元素继承圆角 */
        animation: wave 1.2s ease-out infinite;
        /* 对before元素定义动画，完成时间1.2s, 采用ease-out过渡，重复循环 */
    }

    @keyframes wave {

        50%,
        70% {
            transform: scale(2);
        }

        80%,
        100% {
            opacity: 0;
        }
    }

    /* 设置背景颜色,自行选取五个颜色即可 */
    .container i:nth-child(1) {
        background: #7ef9ff;
    }

    .container i:nth-child(2) {
        background: #89cff0;
    }

    .container i:nth-child(3) {
        background: #4682b4;
    }

    .container i:nth-child(4) {
        background: #0f52ba;
    }

    .container i:nth-child(5) {
        background: #007788;
    }

    /*
    * 现在动画都是同时出现的，而我们需要的是一种逐渐出现的效果
    * 所以需要对每个元素的动画加一个延迟
    * 最后一个与第一个之间的间隔太短
    * 所以需要把整体的动画时间延长一下
    */
    .container i:nth-child(1)::before {
        animation-delay: 0s;
        /* 第一个不需要延迟 */
    }

    .container i:nth-child(2)::before {
        animation-delay: 0.2s;
        /* 依次延迟0.2s */
    }

    .container i:nth-child(3)::before {
        animation-delay: 0.4s;
    }

    .container i:nth-child(4)::before {
        animation-delay: 0.6s;
    }

    .container i:nth-child(5)::before {
        animation-delay: 0.8s;
    }
    </style>
</head>

<body>
    <div class="container">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>

</html>