model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.76T 0.21
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>Spinner Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #e8473f;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: flex-start;
16    justify-content: center;
17    padding-top: 80px;
18  }
19
20  .spinner {
21    position: relative;
22    width: 60px;
23    height: 60px;
24    animation: spin 1.2s linear infinite;
25  }
26
27  .arc {
28    position: absolute;
29    width: 100%;
30    height: 100%;
31    border: 2.5px solid transparent;
32    border-radius: 50%;
33  }
34
35  .arc1 {
36    border-top-color: white;
37    border-right-color: white;
38    transform: rotate(-45deg);
39    animation: arc1-anim 1.2s ease-in-out infinite;
40  }
41
42  .arc2 {
43    border-bottom-color: white;
44    border-left-color: white;
45    transform: rotate(-45deg);
46    animation: arc2-anim 1.2s ease-in-out infinite;
47  }
48
49  .dot {
50    position: absolute;
51    width: 5px;
52    height: 5px;
53    background: white;
54    border-radius: 50%;
55    top: 50%;
56    left: 50%;
57    transform: translate(-50%, -50%);
58  }
59
60  @keyframes arc1-anim {
61    0%   { transform: rotate(-45deg); }
62    50%  { transform: rotate(135deg); }
63    100% { transform: rotate(315deg); }
64  }
65
66  @keyframes arc2-anim {
67    0%   { transform: rotate(-45deg); }
68    50%  { transform: rotate(-225deg); }
69    100% { transform: rotate(-405deg); }
70  }
71</style>
72</head>
73<body>
74  <div class="spinner">
75    <div class="arc arc1"></div>
76    <div class="arc arc2"></div>
77    <div class="dot"></div>
78  </div>
79
80  <script>
81    // Using canvas for more precise arc animation
82    const canvas = document.createElement('canvas');
83    canvas.width = 70;
84    canvas.height = 70;
85    canvas.style.position = 'absolute';
86    canvas.style.top = '80px';
87    canvas.style.left = '50%';
88    canvas.style.transform = 'translateX(-50%)';
89    
90    // Remove the div-based spinner and use canvas instead
91    document.querySelector('.spinner').remove();
92    document.body.appendChild(canvas);
93    
94    const ctx = canvas.getContext('2d');
95    const cx = 35, cy = 35, r = 25;
96    let angle = 0;
97    
98    function draw() {
99      ctx.clearRect(0, 0, canvas.width, canvas.height);
100      
101      // Draw center dot
102      ctx.beginPath();
103      ctx.arc(cx, cy, 3, 0, Math.PI * 2);
104      ctx.fillStyle = 'white';
105      ctx.fill();
106      
107      ctx.strokeStyle = 'white';
108      ctx.lineWidth = 2.5;
109      ctx.lineCap = 'round';
110      
111      // Arc 1: top-right quadrant rotating
112      ctx.beginPath();
113      ctx.arc(cx, cy, r, angle - Math.PI * 0.05, angle + Math.PI * 0.95);
114      ctx.stroke();
115      
116      // Arc 2: bottom-left quadrant rotating (opposite)
117      ctx.beginPath();
118      ctx.arc(cx, cy, r, angle + Math.PI - Math.PI * 0.05, angle + Math.PI + Math.PI * 0.95);
119      ctx.stroke();
120      
121      angle += 0.06;
122      requestAnimationFrame(draw);
123    }
124    
125    draw();
126  </script>
127</body>
128</html>