model output
GPT-5.4

Spinners using Font Icons
A 0.72T 0.24
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 Dual-Arc Loader</title>
7<style>
8  :root{
9    --bg:#1b1b1b;
10    --white:#ffffff;
11    --size:58px;
12    --stroke:12px;
13    --glow:0 0 10px rgba(255,255,255,.22), 0 0 18px rgba(255,255,255,.08);
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    position:relative;
26    font-family:sans-serif;
27  }
28
29  /* place near top-center like the reference */
30  .stage{
31    position:absolute;
32    left:50%;
33    top:42px;
34    transform:translateX(-50%);
35    width:var(--size);
36    height:var(--size);
37    filter: drop-shadow(0 0 6px rgba(255,255,255,.12));
38  }
39
40  .spinner{
41    position:relative;
42    width:100%;
43    height:100%;
44    animation: spin 1.15s linear infinite;
45  }
46
47  .arc{
48    position:absolute;
49    inset:0;
50    border-radius:50%;
51    box-sizing:border-box;
52    border:var(--stroke) solid transparent;
53    filter: drop-shadow(0 0 6px rgba(255,255,255,.18));
54  }
55
56  /* two opposing bright curved segments */
57  .arc.a{
58    border-top-color:var(--white);
59    border-right-color:var(--white);
60    transform:rotate(-18deg);
61    box-shadow:var(--glow);
62  }
63
64  .arc.b{
65    border-bottom-color:var(--white);
66    border-left-color:var(--white);
67    transform:rotate(-18deg);
68    box-shadow:var(--glow);
69  }
70
71  /* soften the inner crossing so it feels like tapered ends */
72  .spinner::before{
73    content:"";
74    position:absolute;
75    inset:9px;
76    border-radius:50%;
77    background:var(--bg);
78    z-index:2;
79  }
80
81  /* subtle bloom around the whole mark */
82  .spinner::after{
83    content:"";
84    position:absolute;
85    inset:-4px;
86    border-radius:50%;
87    background:radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 62%);
88    z-index:0;
89    filter:blur(3px);
90  }
91
92  @keyframes spin{
93    from{ transform:rotate(0deg); }
94    to{ transform:rotate(360deg); }
95  }
96</style>
97</head>
98<body>
99  <div class="stage">
100    <div class="spinner">
101      <div class="arc a"></div>
102      <div class="arc b"></div>
103    </div>
104  </div>
105</body>
106</html>