model output
GPT-5.4

Single Element Spinner
A 0.88T 0.31
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 Cyan Arc Spinner</title>
7<style>
8  :root{
9    --bg:#111;
10    --cyan:#12c8ff;
11    --size:42px;
12    --stroke:3px;
13    --x:194px;
14    --y:102px;
15    --dur:1.2s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  .stage{
27    position:relative;
28    width:100vw;
29    height:100vh;
30    background:var(--bg);
31  }
32
33  .spinner{
34    position:absolute;
35    left:var(--x);
36    top:var(--y);
37    width:var(--size);
38    height:var(--size);
39    transform:translate(-50%,-50%);
40  }
41
42  .arc{
43    position:absolute;
44    inset:0;
45    border-radius:50%;
46    box-sizing:border-box;
47    border:var(--stroke) solid transparent;
48    border-top-color:var(--cyan);
49    filter:drop-shadow(0 0 1px rgba(18,200,255,.35));
50    opacity:1;
51  }
52
53  /* Two short arcs, opposite each other, rotating as a unit */
54  .arc.a{
55    transform:rotate(18deg);
56    clip-path:inset(0 0 50% 0);
57  }
58
59  .arc.b{
60    transform:rotate(198deg);
61    clip-path:inset(0 0 50% 0);
62  }
63
64  .spinner{
65    animation: spin var(--dur) linear infinite;
66  }
67
68  /* Slight pulse to mimic the subtle frame-to-frame thickness/brightness shift */
69  .spinner::after{
70    content:"";
71    position:absolute;
72    inset:0;
73    border-radius:50%;
74    box-shadow:0 0 0 0 rgba(18,200,255,0);
75    animation: pulse var(--dur) ease-in-out infinite;
76    pointer-events:none;
77  }
78
79  @keyframes spin{
80    from{ transform:translate(-50%,-50%) rotate(0deg); }
81    to{ transform:translate(-50%,-50%) rotate(360deg); }
82  }
83
84  @keyframes pulse{
85    0%,100%{ opacity:.9; transform:scale(1); }
86    50%{ opacity:1; transform:scale(1.02); }
87  }
88</style>
89</head>
90<body>
91  <div class="stage">
92    <div class="spinner" aria-hidden="true">
93      <div class="arc a"></div>
94      <div class="arc b"></div>
95    </div>
96  </div>
97</body>
98</html>