model output
Gemini 3 Flash Preview

Single Element Spinner
A 0.77T 0.23
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 Loading Spinner</title>
7    <style>
8        /* 
9           Background matches the dark gray/black from the video.
10           Center the spinner in the viewport.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #111111;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            height: 100vh;
20            overflow: hidden;
21        }
22
23        /* Container for the SVG spinner */
24        .loader {
25            width: 60px;
26            height: 60px;
27            /* Constant rotation of the entire container */
28            animation: rotate-container 2s linear infinite;
29        }
30
31        .loader svg {
32            width: 100%;
33            height: 100%;
34        }
35
36        /* 
37           The path element represents the cyan arc.
38           Colors and stroke-linecap (rounded ends) match the video style.
39        */
40        .loader .path {
41            stroke: #00aeef; /* The cyan color observed in the video */
42            stroke-width: 4;
43            stroke-linecap: round;
44            fill: none;
45            /* 
46               The 'dash' animation handles the expanding and shrinking effect 
47               of the arc length while it rotates.
48            */
49            animation: dash-stretch 1.5s ease-in-out infinite;
50        }
51
52        /* 
53           Keyframes for the overall rotation.
54           Duration matches the perceived speed in the video clips.
55        */
56        @keyframes rotate-container {
57            100% {
58                transform: rotate(360deg);
59            }
60        }
61
62        /* 
63           Indeterminate dash animation:
64           0%: Small arc (1% of circumference).
65           50%: Long arc (approx 70% of circumference).
66           100%: Small arc again, but offset forward to create the "chase" effect.
67           The circle circumference for r=20 is ~125.66.
68        */
69        @keyframes dash-stretch {
70            0% {
71                stroke-dasharray: 1, 150;
72                stroke-dashoffset: 0;
73            }
74            50% {
75                stroke-dasharray: 90, 150;
76                stroke-dashoffset: -35;
77            }
78            100% {
79                stroke-dasharray: 90, 150;
80                stroke-dashoffset: -124;
81            }
82        }
83    </style>
84</head>
85<body>
86
87    <div class="loader">
88        <svg viewBox="0 0 50 50">
89            <!-- 
90                cx/cy: Center of the circle (25 for a 50x50 viewbox)
91                r: Radius of the circle (20)
92            -->
93            <circle class="path" cx="25" cy="25" r="20"></circle>
94        </svg>
95    </div>
96
97</body>
98</html>