model output
Gemini 3 Flash Preview

Motion Table - Orbit
A 0.94T 0.16
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>Circular Loading Animation</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: #413f41; /* Dark gray background matching the video */
17            overflow: hidden;
18        }
19
20        /* Container for the animation */
21        .loader-container {
22            position: relative;
23            width: 110px;
24            height: 110px;
25        }
26
27        /* The static thin circular path */
28        .ring {
29            position: absolute;
30            top: 0;
31            left: 0;
32            width: 100%;
33            height: 100%;
34            border: 1px solid rgba(255, 255, 255, 0.3); /* Thin white circle with low opacity */
35            border-radius: 50%;
36            box-sizing: border-box;
37        }
38
39        /* Rotating container for the dot */
40        .dot-orbit {
41            position: absolute;
42            top: 0;
43            left: 0;
44            width: 100%;
45            height: 100%;
46            /* 
47               The animation takes 4 seconds for a full 360° rotation 
48               as observed in the video timestamps (0s to 4s cycle).
49            */
50            animation: rotate-orbit 4s linear infinite;
51        }
52
53        /* The solid white dot */
54        .dot {
55            position: absolute;
56            top: 50%;
57            right: 0;
58            width: 15px; /* Size matches the visual proportion in the video */
59            height: 15px;
60            background-color: #ffffff;
61            border-radius: 50%;
62            /* translate(50%, -50%) ensures the center of the dot sits exactly on the ring border */
63            transform: translate(50%, -50%);
64        }
65
66        /* Keyframes for smooth 360-degree rotation */
67        @keyframes rotate-orbit {
68            from {
69                transform: rotate(0deg);
70            }
71            to {
72                transform: rotate(360deg);
73            }
74        }
75    </style>
76</head>
77<body>
78
79    <div class="loader-container">
80        <!-- The path the dot travels along -->
81        <div class="ring"></div>
82        
83        <!-- The spinning element holding the dot -->
84        <div class="dot-orbit">
85            <div class="dot"></div>
86        </div>
87    </div>
88
89</body>
90</html>