model output
GPT-5.4

Single Element Spinner
A 0.86T 0.30
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  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #fff;
13    overflow: hidden;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #ffffff;
21  }
22
23  /* Positioned to match the upper-left placement in the frames */
24  .spinner {
25    position: absolute;
26    left: 193px;
27    top: 69px;
28    width: 38px;
29    height: 38px;
30    animation: spin 1s linear infinite;
31    transform-origin: 50% 50%;
32  }
33
34  svg {
35    display: block;
36    width: 100%;
37    height: 100%;
38  }
39
40  .arc {
41    fill: none;
42    stroke: #22d8ff;
43    stroke-width: 3;
44    stroke-linecap: round;
45    stroke-dasharray: 24 120;
46    animation: sweep 1s ease-in-out infinite;
47  }
48
49  @keyframes spin {
50    from { transform: rotate(0deg); }
51    to   { transform: rotate(360deg); }
52  }
53
54  /* Arc grows and shrinks while the whole ring rotates,
55     matching the sequence of small cyan curved segments */
56  @keyframes sweep {
57    0% {
58      stroke-dasharray: 18 120;
59      stroke-dashoffset: 0;
60    }
61    25% {
62      stroke-dasharray: 34 120;
63      stroke-dashoffset: -8;
64    }
65    50% {
66      stroke-dasharray: 22 120;
67      stroke-dashoffset: -18;
68    }
69    75% {
70      stroke-dasharray: 32 120;
71      stroke-dashoffset: -28;
72    }
73    100% {
74      stroke-dasharray: 18 120;
75      stroke-dashoffset: -36;
76    }
77  }
78</style>
79</head>
80<body>
81  <div class="stage">
82    <div class="spinner" aria-hidden="true">
83      <svg viewBox="0 0 40 40">
84        <circle class="arc" cx="20" cy="20" r="10"></circle>
85      </svg>
86    </div>
87  </div>
88</body>
89</html>