model output
GPT-5.4

Spinners using Font Icons
A 0.89T 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>Minimal Spinner Replica</title>
7<style>
8  :root{
9    --bg:#1b1b1b;
10    --ring:#f7f7f7;
11    --dim:rgba(255,255,255,.22);
12    --size:58px;
13    --stroke:6px;
14    --dur:1.05s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23    font-family:sans-serif;
24  }
25
26  .stage{
27    position:relative;
28    width:100%;
29    height:100%;
30  }
31
32  .spinner{
33    position:absolute;
34    left:50%;
35    top:42px;
36    width:var(--size);
37    height:var(--size);
38    transform:translateX(-50%);
39    filter: drop-shadow(0 0 8px rgba(255,255,255,.12))
40            drop-shadow(0 0 14px rgba(255,255,255,.06));
41  }
42
43  .spinner svg{
44    width:100%;
45    height:100%;
46    display:block;
47    overflow:visible;
48  }
49
50  .track{
51    fill:none;
52    stroke:var(--dim);
53    stroke-width:var(--stroke);
54    stroke-linecap:round;
55  }
56
57  .head{
58    fill:none;
59    stroke:var(--ring);
60    stroke-width:var(--stroke);
61    stroke-linecap:round;
62    stroke-dasharray:72 118;
63    stroke-dashoffset:0;
64    transform-origin:50% 50%;
65    animation:
66      spin var(--dur) linear infinite,
67      sweep var(--dur) cubic-bezier(.45,0,.55,1) infinite;
68  }
69
70  @keyframes spin{
71    from{ transform:rotate(0deg); }
72    to{ transform:rotate(360deg); }
73  }
74
75  /* Keeps a bright arc of roughly the same length while subtly breathing,
76     matching the soft loading-ring feel in the frames. */
77  @keyframes sweep{
78    0%   { stroke-dasharray:68 122; stroke-dashoffset:2; }
79    25%  { stroke-dasharray:74 116; stroke-dashoffset:-8; }
80    50%  { stroke-dasharray:70 120; stroke-dashoffset:-18; }
81    75%  { stroke-dasharray:76 114; stroke-dashoffset:-28; }
82    100% { stroke-dasharray:68 122; stroke-dashoffset:-38; }
83  }
84
85  .glow{
86    fill:none;
87    stroke:rgba(255,255,255,.28);
88    stroke-width:calc(var(--stroke) + 6px);
89    stroke-linecap:round;
90    stroke-dasharray:72 118;
91    filter:blur(5px);
92    opacity:.55;
93    transform-origin:50% 50%;
94    animation:
95      spin var(--dur) linear infinite,
96      sweep var(--dur) cubic-bezier(.45,0,.55,1) infinite;
97  }
98</style>
99</head>
100<body>
101  <div class="stage">
102    <div class="spinner" aria-label="loading">
103      <svg viewBox="0 0 64 64" role="img" aria-hidden="true">
104        <circle class="track" cx="32" cy="32" r="22"></circle>
105        <circle class="glow"  cx="32" cy="32" r="22"></circle>
106        <circle class="head"  cx="32" cy="32" r="22"></circle>
107      </svg>
108    </div>
109  </div>
110</body>
111</html>