model output
GPT-5.4

Spinners using Font Icons
A 0.80T 0.32
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 Replica</title>
7<style>
8  :root{
9    --bg:#1b1b1b;
10    --size:42px;
11    --ray-w:6px;
12    --ray-h:16px;
13    --count:12;
14    --duration:1s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23    font-family:sans-serif;
24  }
25
26  .stage{
27    position:relative;
28    width:100%;
29    height:100%;
30    background:var(--bg);
31  }
32
33  .spinner{
34    position:absolute;
35    left:50%;
36    top:7.2%;
37    width:var(--size);
38    height:var(--size);
39    transform:translateX(-50%);
40    filter: drop-shadow(0 0 8px rgba(255,255,255,.18));
41  }
42
43  .spinner::before{
44    content:"";
45    position:absolute;
46    inset:-8px;
47    border-radius:50%;
48    background:radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 35%, rgba(255,255,255,0) 70%);
49    pointer-events:none;
50  }
51
52  .bar{
53    position:absolute;
54    left:50%;
55    top:50%;
56    width:var(--ray-w);
57    height:var(--ray-h);
58    margin-left:calc(var(--ray-w) / -2);
59    margin-top:calc(var(--ray-h) / -2);
60    transform-origin:center center;
61  }
62
63  .bar::before{
64    content:"";
65    position:absolute;
66    left:0;
67    top:0;
68    width:100%;
69    height:100%;
70    border-radius:999px;
71    background:#fff;
72    opacity:.18;
73    transform:translateY(calc(var(--size) / -2 + 3px));
74    animation:fade var(--duration) linear infinite;
75    animation-delay:calc(var(--i) * (-1s / 12));
76    box-shadow:0 0 1px rgba(255,255,255,.9);
77  }
78
79  @keyframes fade{
80    0%   { opacity:1; }
81    8%   { opacity:1; }
82    50%  { opacity:.28; }
83    100% { opacity:.12; }
84  }
85
86  @media (prefers-reduced-motion: reduce){
87    .bar::before{ animation:none; opacity:.7; }
88  }
89</style>
90</head>
91<body>
92  <div class="stage">
93    <div class="spinner" id="spinner" aria-label="Loading" role="img"></div>
94  </div>
95
96<script>
97  const spinner = document.getElementById('spinner');
98  const count = 12;
99
100  for (let i = 0; i < count; i++) {
101    const bar = document.createElement('span');
102    bar.className = 'bar';
103    bar.style.setProperty('--i', i);
104    bar.style.transform = `translate(-50%, -50%) rotate(${i * 30}deg)`;
105    spinner.appendChild(bar);
106  }
107</script>
108</body>
109</html>