model output
GPT-5.4

Spinners using Font Icons
A 0.86T 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>Rotating Dual Ring Loader</title>
7<style>
8  :root{
9    --bg:#1c1c1c;
10    --white:#f7f7f7;
11    --size:62px;
12    --stroke:6px;
13    --inner-gap:10px;
14    --glow:0 0 10px rgba(255,255,255,.28), 0 0 18px rgba(255,255,255,.08);
15    --dur:1.15s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24    font-family:sans-serif;
25  }
26
27  .stage{
28    position:relative;
29    width:100%;
30    height:100%;
31  }
32
33  .loader{
34    position:absolute;
35    left:50%;
36    top:42px;
37    width:var(--size);
38    height:var(--size);
39    transform:translateX(-50%);
40    filter:drop-shadow(0 0 6px rgba(255,255,255,.18));
41  }
42
43  .ring{
44    position:absolute;
45    inset:0;
46    border-radius:50%;
47    box-sizing:border-box;
48    box-shadow:var(--glow);
49  }
50
51  .ring.outer{
52    border:var(--stroke) solid var(--white);
53    border-left-color:transparent;
54    animation:spinOuter var(--dur) linear infinite;
55  }
56
57  .ring.inner{
58    inset:calc(var(--stroke) + var(--inner-gap));
59    border:4px solid rgba(255,255,255,.96);
60    border-right-color:transparent;
61    animation:spinInner var(--dur) linear infinite;
62  }
63
64  @keyframes spinOuter{
65    0%   { transform:rotate(35deg); }
66    25%  { transform:rotate(125deg); }
67    50%  { transform:rotate(215deg); }
68    75%  { transform:rotate(305deg); }
69    100% { transform:rotate(395deg); }
70  }
71
72  @keyframes spinInner{
73    0%   { transform:rotate(325deg); }
74    25%  { transform:rotate(235deg); }
75    50%  { transform:rotate(145deg); }
76    75%  { transform:rotate(55deg); }
77    100% { transform:rotate(-35deg); }
78  }
79</style>
80</head>
81<body>
82  <div class="stage">
83    <div class="loader" aria-label="loading animation">
84      <div class="ring outer"></div>
85      <div class="ring inner"></div>
86    </div>
87  </div>
88</body>
89</html>