model output
Gemini 3 Flash Preview

flat loading animate
A 0.84T 0.54
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 {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #ffffff;
17            overflow: hidden;
18        }
19
20        /* Container for the animation */
21        .loader {
22            position: relative;
23            width: 50px;
24            height: 50px;
25            /* The whole container rotates to create the orbiting effect */
26            animation: rotate-main 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
27        }
28
29        /* Individual dots */
30        .dot {
31            position: absolute;
32            width: 18px;
33            height: 18px;
34            border-radius: 50%;
35            top: 50%;
36            left: 50%;
37        }
38
39        /* Blue Dot - Starts Top Right */
40        .dot-blue {
41            background-color: #00aedb;
42            /* Positioning relative to center */
43            margin-top: -24px;
44            margin-left: 6px;
45        }
46
47        /* Red Dot - Starts Bottom Left */
48        .dot-red {
49            background-color: #ff5a5f;
50            /* Positioning relative to center */
51            margin-top: 6px;
52            margin-left: -24px;
53        }
54
55        /**
56         * Keyframe Animation logic:
57         * The video shows a non-linear rotation where dots spend 
58         * more time in certain quadrants or have a "swinging" weight.
59         * The 1.2s duration matches the video's tempo (approx 1 full cycle per 1.2s).
60         */
61        @keyframes rotate-main {
62            0% {
63                transform: rotate(0deg);
64            }
65            100% {
66                transform: rotate(360deg);
67            }
68        }
69
70        /* 
71         * To perfectly match the video's specific start positions 
72         * (Red at ~7 o'clock, Blue at ~1 o'clock), 
73         * we apply an initial rotation offset to the container.
74         */
75        .loader-wrapper {
76            transform: rotate(-15deg);
77        }
78
79    </style>
80</head>
81<body>
82
83    <div class="loader-wrapper">
84        <div class="loader">
85            <div class="dot dot-blue"></div>
86            <div class="dot dot-red"></div>
87        </div>
88    </div>
89
90    <script>
91        /**
92         * The animation is purely CSS-driven for performance and smoothness.
93         * No JavaScript is required for this specific loading sequence.
94         */
95    </script>
96</body>
97</html>