model output
Claude Sonnet 4.6

Thinking about SVG-preloaders
A 0.78T 0.11
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>Color Spinner</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #0a0a0a;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    overflow: hidden;
18  }
19
20  /* Subtle grid pattern */
21  body::before {
22    content: '';
23    position: fixed;
24    inset: 0;
25    background-image: 
26      repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255,255,255,0.015) 18px, rgba(255,255,255,0.015) 19px),
27      repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(255,255,255,0.015) 18px, rgba(255,255,255,0.015) 19px);
28    pointer-events: none;
29  }
30
31  .spinner {
32    position: relative;
33    width: 80px;
34    height: 80px;
35    animation: spin 1.2s linear infinite;
36  }
37
38  @keyframes spin {
39    from { transform: rotate(0deg); }
40    to { transform: rotate(360deg); }
41  }
42
43  .dot {
44    position: absolute;
45    width: 10px;
46    height: 10px;
47    border-radius: 50%;
48    top: 50%;
49    left: 50%;
50    margin-top: -5px;
51    margin-left: -5px;
52  }
53</style>
54</head>
55<body>
56<div class="spinner" id="spinner"></div>
57
58<script>
59  const spinner = document.getElementById('spinner');
60  const numDots = 12;
61  const radius = 32;
62
63  // Color spectrum for the dots - cycling through hues
64  // Leading dots are bright, trailing dots are darker/dimmer
65  // Colors observed: yellow-green, yellow, orange, red-brown, purple, blue
66  const colors = [
67    '#c8a000', // dim yellow-orange (oldest/trailing)
68    '#8b4513', // dark brown-red
69    '#6b1a1a', // very dark red
70    '#4a0a2a', // very dark purple
71    '#3a0a3a', // near black purple
72    '#1a0a1a', // almost black
73    '#4b0082', // dark purple (fading in)
74    '#6633aa', // medium purple
75    '#4488dd', // blue
76    '#88cc00', // yellow-green
77    '#ddcc00', // yellow
78    '#ffdd00', // bright yellow (leading)
79  ];
80
81  for (let i = 0; i < numDots; i++) {
82    const dot = document.createElement('div');
83    dot.classList.add('dot');
84    
85    // Position dots around the circle
86    // Start from top (-90deg) going clockwise
87    const angle = (i / numDots) * 2 * Math.PI - Math.PI / 2;
88    const x = Math.cos(angle) * radius;
89    const y = Math.sin(angle) * radius;
90    
91    dot.style.transform = `translate(${x}px, ${y}px)`;
92    dot.style.backgroundColor = colors[i];
93    
94    // Size variation - leading dots slightly larger
95    const sizeScale = 0.7 + (i / numDots) * 0.5;
96    const size = Math.round(8 * sizeScale);
97    dot.style.width = size + 'px';
98    dot.style.height = size + 'px';
99    dot.style.marginTop = (-size/2) + 'px';
100    dot.style.marginLeft = (-size/2) + 'px';
101    
102    spinner.appendChild(dot);
103  }
104
105  // Animate colors shifting around the ring
106  let offset = 0;
107  function animateColors() {
108    const dots = spinner.querySelectorAll('.dot');
109    dots.forEach((dot, i) => {
110      const colorIndex = (i + offset) % numDots;
111      dot.style.backgroundColor = colors[colorIndex];
112    });
113    offset = (offset + 1) % numDots;
114  }
115
116  // Color shift every ~100ms to match rotation feel
117  setInterval(animateColors, 100);
118</script>
119</body>
120</html>