model output
Gemini 3 Flash Preview

Simple Spinner
A 0.85T 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>Circular Loading Animation</title>
7    <style>
8        /* 
9           Analysis of Animation:
10           - Background: Deep purple (#483475)
11           - Loader: A thin circular ring with a solid dot moving along the path.
12           - Color Cycle: Cyan -> Green -> Lime -> Orange -> Red -> Back to Cyan.
13           - Rotation: Continuous 360-degree rotation.
14           - Timing: Approximately 3 seconds per full loop.
15        */
16
17        :root {
18            --bg-color: #483475;
19            --duration: 3s;
20            --color-1: #00d2ff; /* Cyan */
21            --color-2: #4caf50; /* Green */
22            --color-3: #8bc34a; /* Lime */
23            --color-4: #ff9800; /* Orange */
24            --color-5: #f44336; /* Red */
25        }
26
27        body, html {
28            margin: 0;
29            padding: 0;
30            width: 100%;
31            height: 100%;
32            display: flex;
33            justify-content: center;
34            align-items: center;
35            background-color: var(--bg-color);
36            overflow: hidden;
37        }
38
39        .loader-container {
40            position: relative;
41            width: 60px;
42            height: 60px;
43            /* The main rotation animation for the whole component */
44            animation: rotate var(--duration) linear infinite;
45        }
46
47        /* The faint circular ring */
48        .ring {
49            position: absolute;
50            top: 0;
51            left: 0;
52            width: 100%;
53            height: 100%;
54            border-radius: 50%;
55            border: 1.5px solid rgba(255, 255, 255, 0.1);
56            box-sizing: border-box;
57            /* The border color also cycles subtly with the dot */
58            animation: ring-color var(--duration) linear infinite;
59        }
60
61        /* The moving dot */
62        .dot {
63            position: absolute;
64            top: 0;
65            left: 50%;
66            width: 10px;
67            height: 10px;
68            background-color: var(--color-1);
69            border-radius: 50%;
70            transform: translate(-50%, -50%);
71            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
72            /* Color cycle animation */
73            animation: dot-color var(--duration) linear infinite;
74        }
75
76        /* Keyframes for rotation */
77        @keyframes rotate {
78            from {
79                transform: rotate(0deg);
80            }
81            to {
82                transform: rotate(360deg);
83            }
84        }
85
86        /* Keyframes for the dot color cycle */
87        @keyframes dot-color {
88            0%, 100% { background-color: var(--color-1); }
89            20% { background-color: var(--color-2); }
90            40% { background-color: var(--color-3); }
91            60% { background-color: var(--color-4); }
92            80% { background-color: var(--color-5); }
93        }
94
95        /* Keyframes for the ring color cycle (faint version of the dot color) */
96        @keyframes ring-color {
97            0%, 100% { border-color: rgba(0, 210, 255, 0.3); }
98            20% { border-color: rgba(76, 175, 80, 0.3); }
99            40% { border-color: rgba(139, 195, 74, 0.3); }
100            60% { border-color: rgba(255, 152, 0, 0.3); }
101            80% { border-color: rgba(244, 67, 54, 0.3); }
102        }
103
104    </style>
105</head>
106<body>
107
108    <div class="loader-container">
109        <div class="ring"></div>
110        <div class="dot"></div>
111    </div>
112
113    <script>
114        // No complex logic required as CSS keyframes handle the synchronization perfectly.
115        // The rotation is linear to match the smooth continuous motion observed in the video.
116    </script>
117</body>
118</html>