model output
Gemini 3 Flash Preview

Simple Spinner
A 0.96T 0.38
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            /* The vibrant red-orange background from the video */
17            background-color: #FF451D;
18            overflow: hidden;
19        }
20
21        /* Container for the rotating dots */
22        .loader {
23            position: relative;
24            width: 34px;
25            height: 34px;
26            /* 
27               Based on the video timestamps:
28               0.0s: Vertical
29               1.5s: Vertical (180 degree rotation)
30               This implies a 3s duration for a full 360 degree loop.
31               The motion in the video appears linear.
32            */
33            animation: rotate 3s linear infinite;
34        }
35
36        /* Individual dots */
37        .dot {
38            position: absolute;
39            width: 10px;
40            height: 10px;
41            background-color: #FFFFFF;
42            border-radius: 50%;
43            left: 50%;
44            /* Keep dots centered on the X axis of the loader */
45            transform: translateX(-50%);
46        }
47
48        /* Top dot */
49        .dot:first-child {
50            top: 0;
51        }
52
53        /* Bottom dot */
54        .dot:last-child {
55            bottom: 0;
56        }
57
58        /* Rotation keyframes */
59        @keyframes rotate {
60            from {
61                transform: rotate(0deg);
62            }
63            to {
64                transform: rotate(360deg);
65            }
66        }
67
68        /* Optional: High-quality rendering hint */
69        .loader, .dot {
70            will-change: transform;
71            backface-visibility: hidden;
72        }
73    </style>
74</head>
75<body>
76
77    <div class="loader">
78        <div class="dot"></div>
79        <div class="dot"></div>
80    </div>
81
82</body>
83</html>