model output
Gemini 3 Flash Preview

flat loading animate
A 0.85T 0.36
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Orbiting Dots Loader</title>
7    <style>
8        /* Reset and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            background-color: #ffffff;
18            overflow: hidden;
19        }
20
21        /* Container for the loader */
22        .loader-container {
23            position: relative;
24            width: 60px;
25            height: 60px;
26            display: flex;
27            justify-content: center;
28            align-items: center;
29        }
30
31        /* Individual dots */
32        .dot {
33            position: absolute;
34            width: 18px;
35            height: 18px;
36            border-radius: 50%;
37            /* Use cubic-bezier to match the smooth, slightly snapping motion of the video */
38            animation: orbit 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
39        }
40
41        /* Color assignment */
42        .dot-red {
43            background-color: #ff5f57; /* Matches the vibrant red-orange in the video */
44            /* Start dot at the left position */
45            z-index: 2;
46        }
47
48        .dot-blue {
49            background-color: #3db1ff; /* Matches the bright cyan-blue in the video */
50            /* Offset the blue dot by half the animation duration to place it opposite the red one */
51            animation-delay: -0.7s;
52            z-index: 1;
53        }
54
55        /* 
56           Animation logic: 
57           The dots orbit a central point. To create depth, we slightly 
58           adjust the scale and z-index during the rotation.
59        */
60        @keyframes orbit {
61            0% {
62                transform: rotate(0deg) translateX(-12px) scale(1.1);
63                z-index: 2;
64            }
65            25% {
66                transform: rotate(90deg) translateX(-12px) scale(1);
67            }
68            50% {
69                transform: rotate(180deg) translateX(-12px) scale(0.85);
70                z-index: 1;
71            }
72            75% {
73                transform: rotate(270deg) translateX(-12px) scale(1);
74            }
75            100% {
76                transform: rotate(360deg) translateX(-12px) scale(1.1);
77                z-index: 2;
78            }
79        }
80
81        /* 
82           Technique note: 
83           By using 'translateX' on a rotating element, we create an orbit. 
84           The 'z-index' swap at 0% and 50% ensures the dots appear to 
85           pass in front/behind each other correctly.
86        */
87    </style>
88</head>
89<body>
90
91    <div class="loader-container">
92        <div class="dot dot-red"></div>
93        <div class="dot dot-blue"></div>
94    </div>
95
96</body>
97</html>