model output
Claude Sonnet 4.6

Spinners using Font Icons
A 0.67T 0.29
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>Loading Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #111;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    height: 100vh;
20    overflow: hidden;
21  }
22
23  .loader-container {
24    position: absolute;
25    top: 55px;
26    left: 50%;
27    transform: translateX(-50%);
28    width: 50px;
29    height: 50px;
30  }
31
32  canvas {
33    display: block;
34  }
35</style>
36</head>
37<body>
38<div class="loader-container">
39  <canvas id="loader" width="50" height="50"></canvas>
40</div>
41
42<script>
43  const canvas = document.getElementById('loader');
44  const ctx = canvas.getContext('2d');
45  const cx = 25, cy = 25, r = 18;
46  const strokeWidth = 4;
47
48  let startAngle = -Math.PI / 2;
49  let rotation = 0;
50  const arcLength = Math.PI * 1.5; // ~270 degrees arc
51
52  function easeInOut(t) {
53    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
54  }
55
56  let lastTime = null;
57  const speed = 2.5; // radians per second
58
59  function draw(timestamp) {
60    if (!lastTime) lastTime = timestamp;
61    const delta = (timestamp - lastTime) / 1000;
62    lastTime = timestamp;
63
64    rotation += speed * delta;
65
66    ctx.clearRect(0, 0, canvas.width, canvas.height);
67
68    const start = rotation - Math.PI / 2;
69    const end = start + arcLength;
70
71    // Create gradient along the arc
72    const grad = ctx.createLinearGradient(
73      cx + r * Math.cos(start),
74      cy + r * Math.sin(start),
75      cx + r * Math.cos(end),
76      cy + r * Math.sin(end)
77    );
78    grad.addColorStop(0, 'rgba(255,255,255,0)');
79    grad.addColorStop(0.3, 'rgba(255,255,255,0.8)');
80    grad.addColorStop(0.7, 'rgba(255,255,255,1)');
81    grad.addColorStop(1, 'rgba(255,255,255,0.1)');
82
83    ctx.beginPath();
84    ctx.arc(cx, cy, r, start, end);
85    ctx.strokeStyle = grad;
86    ctx.lineWidth = strokeWidth;
87    ctx.lineCap = 'round';
88    ctx.stroke();
89
90    requestAnimationFrame(draw);
91  }
92
93  requestAnimationFrame(draw);
94</script>
95</body>
96</html>