加载动画 dot_two_three_four_points_and_dot

加载动画 dot_two_three_four_points_and_dot_circle

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <style>
        body {
            margin: 0;
            padding: 0;
             100vw;
            height: 100vh;
            background-color: #323232;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
             100vw;
            height: 300px;
            background-color: #efefef;
        }
        
        .loading {
            font-size: 0;
        }
        
        .dot {
            position: absolute;
            display: inline-block;
             10px;
            height: 10px;
            margin: 5px;
            border-radius: 50%;
            background-color: tomato;
        }
        
        #dot_one {
            background-color: rgb(247, 125, 103);
            animation: dot_circle 2s infinite;
            animation-delay: -0.s;
        }
        
        #dot_two {
            background-color: rgb(70, 219, 145);
            animation: dot_circle 2s infinite;
            animation-delay: -0.4s;
        }
        
        #dot_three {
            background-color: rgb(209, 102, 191);
            animation: dot_circle 2s infinite;
            animation-delay: -0.6s;
        }
        
        #dot_four {
            background-color: rgb(58, 106, 196);
            animation: dot_circle 2s infinite;
            animation-delay: -0.8s;
        }
        
        #dot_five {
            background-color: rgb(255, 71, 71);
            animation: dot_circle 2s infinite;
            animation-delay: -1s;
        }
        
        @keyframes dot_circle {
            /* two-points-trace */
            /* 0% {
                transform: translate(-30px, 0);
            }
            50% {
                transform: translate(30px, 0);
            }
            100% {
                transform: translate(-30px, 0);
            } */
            /* three-points-trace */
            /* 0% {
                transform: translate(30px, 0);
            }
            33% {
                transform: translate(0, 51.96px);
            }
            66% {
                transform: translate(-30px, 0);
            }
            100% {
                transform: translate(30px, 0);
            } */
            /* four-points-trace */
            /* 0% {
                transform: translate(30px, 0);
            }
            25% {
                transform: translate(30px, 60px);
            }
            45% {
                transform: translate(-30px, 60px);
            }
            75% {
                transform: translate(-30px, 0);
            }
            100% {
                transform: translate(30px, 0);
            } */
            0% {
                transform: rotate(0deg) translate(-30px) rotate(0deg);
            }
            100% {
                transform: rotate(360deg) translate(-30px) rotate(-360deg);
            }
        }
    </style>

    <section>
        <div class="container">
            <div class="loading">
                <div class="dot" id="dot_one"></div>
                <div class="dot" id="dot_two"></div>
                <div class="dot" id="dot_three"></div>
                <div class="dot" id="dot_four"></div>
                <div class="dot" id="dot_five"></div>
            </div>
        </div>
    </section>
</body>

</html>