model output
Claude Sonnet 4.6

Spinners using Font Icons
A 0.85T 0.18
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 Spinner</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #1a1a1a;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    height: 100vh;
20    padding-top: 40px;
21  }
22
23  .spinner {
24    position: relative;
25    width: 40px;
26    height: 40px;
27    animation: rotate 1s linear infinite;
28  }
29
30  .spinner span {
31    position: absolute;
32    left: 50%;
33    top: 50%;
34    width: 3px;
35    height: 8px;
36    border-radius: 2px;
37    background: white;
38    transform-origin: center center;
39  }
40
41  @keyframes rotate {
42    from { transform: rotate(0deg); }
43    to { transform: rotate(360deg); }
44  }
45</style>
46</head>
47<body>
48<div class="spinner" id="spinner"></div>
49
50<script>
51  const spinner = document.getElementById('spinner');
52  const count = 12;
53
54  for (let i = 0; i < count; i++) {
55    const span = document.createElement('span');
56    const angle = (i / count) * 360;
57    const opacity = (i + 1) / count;
58    const rad = (angle * Math.PI) / 180;
59    const radius = 12;
60    const x = Math.sin(rad) * radius;
61    const y = -Math.cos(rad) * radius;
62
63    span.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px)) rotate(${angle}deg)`;
64    span.style.opacity = opacity;
65    spinner.appendChild(span);
66  }
67</script>
68</body>
69</html>