model output
Gemini 3 Flash Preview

Single Element Spinner
A 0.73T 0.26
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 Loader Animation</title>
7    <style>
8        /* Reset and center the canvas */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #111111;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        .loader-container {
21            width: 100px;
22            height: 100px;
23            position: relative;
24        }
25
26        /* The SVG handles the stroke dash animation */
27        .spinner {
28            animation: rotate 2s linear infinite;
29            width: 50px;
30            height: 50px;
31            /* Positioning logic to match the video's top-left-ish centering */
32            position: absolute;
33            top: 20%;
34            left: 20%;
35        }
36
37        .path {
38            stroke: #00aeef; /* The cyan/blue color from the video */
39            stroke-linecap: round;
40            /* Dash array math: circumference is ~150 (2 * pi * 24) */
41            animation: dash 1.5s ease-in-out infinite;
42            fill: none;
43            stroke-width: 4;
44        }
45
46        /* Rotate the entire SVG container continuously */
47        @keyframes rotate {
48            100% {
49                transform: rotate(360deg);
50            }
51        }
52
53        /* Animate the dash length and offset to create the "expanding and catching up" effect */
54        @keyframes dash {
55            0% {
56                stroke-dasharray: 1, 150;
57                stroke-dashoffset: 0;
58            }
59            50% {
60                stroke-dasharray: 90, 150;
61                stroke-dashoffset: -35;
62            }
63            100% {
64                stroke-dasharray: 90, 150;
65                stroke-dashoffset: -124;
66            }
67        }
68    </style>
69</head>
70<body>
71
72    <div class="loader-container">
73        <svg class="spinner" viewBox="0 0 50 50">
74            <circle class="path" cx="25" cy="25" r="20"></circle>
75        </svg>
76    </div>
77
78</body>
79</html>