加载中效果

三个动态的点。通过 @keyframes 描述 CSS 动画的中间步骤。
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .loading,
        .loading > div {
            position: relative;
            box-sizing: border-box;
        }

        .loading {
            margin-top: 200px;
            display: block;
            font-size: 0;
            color: #18bc9c;
            height: 18px;
            text-align: center;
        }

        .loading > div {
            display: inline-block;
            float: none;
            background-color: currentColor;
            border: 0 solid currentColor;
            width: 8px;
            height: 8px;
            margin: 6px 8px;
            border-radius: 100%;
            animation: ball-beat 0.9s -0.15s infinite linear;
        }

        .loading > div:nth-child(2n-1) {
            animation-delay: -0.6s;
        }

        @keyframes ball-beat {
            50% {
                opacity: 0.2;
                transform: scale(0.75);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

    </style>

</head>
<body>


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


</body>
</html>