model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.92T 0.29
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>Three Dots Loading Animation</title>
7    <style>
8        /* Reset and Body setup */
9        * {
10            margin: 0;
11            padding: 0;
12            box-sizing: border-box;
13        }
14
15        body {
16            /* Matching the background color from the video frames (#e84d3d) */
17            background-color: #e84d3d;
18            height: 100vh;
19            display: flex;
20            justify-content: center;
21            /* In the video, the loader is positioned near the top-center */
22            align-items: flex-start;
23            padding-top: 100px;
24            overflow: hidden;
25        }
26
27        /* Container for the dots */
28        .loader {
29            display: flex;
30            /* Spacing between the dots */
31            gap: 15px;
32            /* 
33               The animation rotates the whole container 180 degrees.
34               Duration: 1 second matches the loop in the video.
35               Timing: Linear for smooth continuous rotation.
36            */
37            animation: rotateLoader 1s linear infinite;
38            /* Ensure the rotation pivot is the middle dot */
39            transform-origin: center center;
40        }
41
42        /* Individual dots */
43        .dot {
44            width: 14px;
45            height: 14px;
46            background-color: #ffffff;
47            border-radius: 50%;
48        }
49
50        /* 
51           Keyframes:
52           The video is horizontal at 0.5s and tilted/vertical at 0s and 1s.
53           To achieve this, we start at 90 degrees (vertical) at 0%.
54           At 50% (0.5s), it will be at 180 degrees (horizontal).
55           At 100% (1.0s), it will be at 270 degrees (vertical again, looking identical to the start).
56        */
57        @keyframes rotateLoader {
58            from {
59                transform: rotate(90deg);
60            }
61            to {
62                transform: rotate(270deg);
63            }
64        }
65
66        /* Optional: Adding a slight motion blur effect consistent with video frames */
67        .dot {
68            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
69        }
70    </style>
71</head>
72<body>
73
74    <!-- Simple structure: a container holding three white dots -->
75    <div class="loader">
76        <div class="dot"></div>
77        <div class="dot"></div>
78        <div class="dot"></div>
79    </div>
80
81</body>
82</html>