model output
Gemini 3 Flash Preview

Single Element Spinner
A 0.80T 0.28
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>Indeterminate Spinner Animation</title>
7    <style>
8        /* Base page styling to match the video background */
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: #121212; /* Dark background matching the video frames */
17            overflow: hidden;
18        }
19
20        /* Container for the spinner to handle constant rotation */
21        .spinner-container {
22            width: 100px;
23            height: 100px;
24            animation: rotate 2s linear infinite;
25        }
26
27        /* SVG Circle styling */
28        .spinner-path {
29            fill: none;
30            stroke: #00aeef; /* The specific bright cyan/blue from the video */
31            stroke-width: 3;
32            stroke-linecap: round;
33            /* Dash animation creates the stretching/shrinking effect */
34            animation: dash 1.5s ease-in-out infinite;
35        }
36
37        /* Keyframes for the overall rotation of the SVG container */
38        @keyframes rotate {
39            100% {
40                transform: rotate(360deg);
41            }
42        }
43
44        /* 
45           Keyframes for the dash effect:
46           0%: Small dot (1 unit of stroke, 200 units of gap)
47           50%: Stretches to a long arc (89 units) while offsetting the start point
48           100%: Returns to the original state but shifted further along the path
49        */
50        @keyframes dash {
51            0% {
52                stroke-dasharray: 1, 200;
53                stroke-dashoffset: 0;
54            }
55            50% {
56                stroke-dasharray: 89, 200;
57                stroke-dashoffset: -35px;
58            }
59            100% {
60                stroke-dasharray: 89, 200;
61                stroke-dashoffset: -124px;
62            }
63        }
64    </style>
65</head>
66<body>
67
68    <!-- 
69        The animation uses an SVG circle. 
70        viewBox="0 0 50 50" provides a consistent coordinate system.
71        The circle is centered at 25, 25 with a radius of 20.
72    -->
73    <svg class="spinner-container" viewBox="0 0 50 50">
74        <circle class="spinner-path" cx="25" cy="25" r="20"></circle>
75    </svg>
76
77</body>
78</html>