model output
Gemini 3 Flash Preview

Thinking about SVG-preloaders
A 0.66T 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>Rainbow Loading Animation</title>
7    <style>
8        /* Base page styling to match the video's dark, textured background */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #050505;
13            background-image: 
14                radial-gradient(#1a1a1a 1px, transparent 1px),
15                radial-gradient(#1a1a1a 1px, transparent 1px);
16            background-size: 12px 12px;
17            background-position: 0 0, 6px 6px;
18            height: 100vh;
19            display: flex;
20            justify-content: center;
21            align-items: center;
22            overflow: hidden;
23        }
24
25        /* Container for the dot assembly */
26        .loader {
27            position: relative;
28            width: 100px;
29            height: 100px;
30            /* Smooth continuous rotation as seen in the video */
31            animation: spin 2s linear infinite;
32        }
33
34        /* Individual dot styling */
35        .dot {
36            position: absolute;
37            top: 50%;
38            left: 50%;
39            width: 12px;
40            height: 12px;
41            margin-top: -6px;
42            margin-left: -6px;
43            border-radius: 50%;
44            /* Slight blur to mimic the soft-edged look in the video */
45            filter: blur(0.5px);
46            /* Position dots in a circular arrangement */
47            transform: rotate(calc(var(--i) * 30deg)) translateY(-38px);
48            /* Assign hue based on the spectrum observed in the video */
49            /* The spectrum flows from Purple at 12 o'clock, clockwise through Blue, Cyan, Green, Yellow, Orange, Red */
50            background-color: hsl(calc(300 - (var(--i) * 30)), 85%, 60%);
51            /* Subtle glow for vibrancy */
52            box-shadow: 0 0 4px hsla(calc(300 - (var(--i) * 30)), 85%, 60%, 0.4);
53        }
54
55        /* Continuous rotation keyframe */
56        @keyframes spin {
57            from {
58                transform: rotate(0deg);
59            }
60            to {
61                transform: rotate(360deg);
62            }
63        }
64    </style>
65</head>
66<body>
67
68    <div class="loader" id="loader">
69        <!-- Dots will be generated by JavaScript for conciseness -->
70    </div>
71
72    <script>
73        const loader = document.getElementById('loader');
74        const dotCount = 12;
75
76        // Generate 12 dots to form the circle
77        for (let i = 0; i < dotCount; i++) {
78            const dot = document.createElement('div');
79            dot.className = 'dot';
80            // Set the custom property for the CSS calc() positioning and color
81            dot.style.setProperty('--i', i);
82            loader.appendChild(dot);
83        }
84    </script>
85</body>
86</html>