model output
Gemini 3 Flash Preview

Single Element Spinner
A 0.80T 0.33
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>CSS Spinner Animation</title>
7    <style>
8        /* 
9           Background matches the deep charcoal/near-black from the video (#121212).
10           Flexbox is used to match the relative positioning of the spinner.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #121212;
16            display: flex;
17            height: 100vh;
18            width: 100vw;
19            overflow: hidden;
20        }
21
22        /* 
23           Container to position the spinner in the upper-left quadrant 
24           as seen in the provided frames.
25        */
26        .container {
27            padding-top: 100px;
28            padding-left: 150px;
29        }
30
31        /* 
32           The Spinner:
33           - Matches the cyan-blue color (#00aeef).
34           - border-top provides the distinct arc visible in the frames.
35           - border-right is set to transparent to keep the arc to a 90-degree segment.
36           - Duration is tuned to ~0.8s for a smooth, fast rotation matching the video.
37        */
38        .spinner {
39            width: 32px;
40            height: 32px;
41            border: 3.5px solid rgba(0, 174, 239, 0.1); /* Subtle background ring */
42            border-top: 3.5px solid #00aeef; /* The active blue segment */
43            border-radius: 50%;
44            animation: spin 0.8s linear infinite;
45            box-sizing: border-box;
46        }
47
48        /* 
49           Standard rotation keyframes for a continuous 360-degree loop.
50        */
51        @keyframes spin {
52            0% {
53                transform: rotate(0deg);
54            }
55            100% {
56                transform: rotate(360deg);
57            }
58        }
59    </style>
60</head>
61<body>
62
63    <div class="container">
64        <div class="spinner"></div>
65    </div>
66
67</body>
68</html>