CSS实现三个常见加载中动画

🌱加载中动画1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading2</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .rotate-loading {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 6px solid rgba(200, 200, 200, 0.5);
            border-top: 6px solid black;
            animation: rotate-loading 1s linear infinite;
        }

        @keyframes rotate-loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                /* 顺时针旋转360度 */
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="rotate-loading"></div>
</body>

</html>

🍀加载中动画2

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading3</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .wave-loading {
            width: 400px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .wave-loading span {
            display: inline-block;
            font-size: 30px;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            animation: wave-loading 1s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--time));
        }

        @keyframes wave-loading {
            0% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(-20px);
            }

            50%,100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
    <div class="wave-loading">
        <span style="--time:1">l</span>
        <span style="--time:2">o</span>
        <span style="--time:3">a</span>
        <span style="--time:4">d</span>
        <span style="--time:5">i</span>
        <span style="--time:6">n</span>
        <span style="--time:7">g</span>
        <span style="--time:8">.</span>
        <span style="--time:9">.</span>
        <span style="--time:10">.</span>
    </div>
</body>

</html>

🌳加载中动画3

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading1</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .flex-loading {
            width: 200px;
            height: 36px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .flex-loading li {
            width: 4px;
            height: 12px;
            display: inline-block;
            background: #000;
            margin: 0 2px;
            /* 动画名：flex-loading，
             * 执行时长：0.8s，
             * 动画执行速度：ease-in-out(指定开始和结束较慢的动画)，
             * 动画执行次数：infinite(无限次) */
            animation: flex-loading 0.8s ease-in-out infinite;
            /* 每个小格子的伸缩动画分别延迟0.1s，0.2s，0.3s...执行，
             * var(--time)使用CSS3变量 */
            animation-delay: calc(0.1s * var(--time));
        }

        @keyframes flex-loading {

            0%,
            25%,
            50% {
                transform: scaleY(1);
            }
            /* 小格子纵向伸展到原来的4倍 */
            75% {
                transform: scaleY(4);
            }
        }
    </style>
</head>

<body>
    <ul class="flex-loading">
        <li style="--time:1"></li>
        <li style="--time:2"></li>
        <li style="--time:3"></li>
        <li style="--time:4"></li>
        <li style="--time:5"></li>
        <li style="--time:6"></li>
        <li style="--time:7"></li>
        <li style="--time:8"></li>
    </ul>
</body>

</html>
</html>

CSS实现三个常见加载中动画

🌱加载中动画1

🍀加载中动画2

🌳加载中动画3

逆风微笑的代码狗

引用和评论

探索Go Module：常用命令及其用途

CSS团队协作规范

前站 - 前端导航，搜索社区，阅读文章，提升技术

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

开发插件集合