model output
GPT-5.4

CSS3 loading animations
A 0.81T 0.34
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" />
6<title>Glowing Ring Pulse</title>
7<style>
8  :root{
9    --bg:#1b1b1b;
10    --teal:#18e6c8;
11    --teal-d:#0b7f73;
12    --size:56px;
13    --stroke:6px;
14    --dur:1.15s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23  }
24
25  body{
26    position:relative;
27    font-family:sans-serif;
28  }
29
30  .wrap{
31    position:absolute;
32    left:50%;
33    top:36px;
34    width:var(--size);
35    height:var(--size);
36    transform:translateX(-50%);
37    filter: blur(.15px);
38  }
39
40  .ring{
41    position:absolute;
42    inset:0;
43    border-radius:50%;
44    animation: spin var(--dur) linear infinite;
45  }
46
47  /* soft outer haze */
48  .ring::before{
49    content:"";
50    position:absolute;
51    inset:-8px;
52    border-radius:50%;
53    background:
54      conic-gradient(
55        from 18deg,
56        rgba(24,230,200,0) 0deg 18deg,
57        rgba(24,230,200,.18) 18deg 72deg,
58        rgba(24,230,200,0) 72deg 132deg,
59        rgba(24,230,200,.12) 132deg 188deg,
60        rgba(24,230,200,0) 188deg 360deg
61      );
62    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
63            mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
64    filter: blur(7px);
65    opacity:.55;
66    animation: pulse var(--dur) ease-in-out infinite;
67  }
68
69  /* main segmented ring */
70  .ring::after{
71    content:"";
72    position:absolute;
73    inset:0;
74    border-radius:50%;
75    background:
76      conic-gradient(
77        from -8deg,
78        rgba(24,230,200,0) 0deg 18deg,
79        rgba(24,230,200,.95) 18deg 108deg,
80        rgba(24,230,200,0) 108deg 168deg,
81        rgba(24,230,200,.82) 168deg 228deg,
82        rgba(24,230,200,0) 228deg 300deg,
83        rgba(24,230,200,.72) 300deg 344deg,
84        rgba(24,230,200,0) 344deg 360deg
85      );
86    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke) - 1px), #000 calc(100% - var(--stroke)));
87            mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke) - 1px), #000 calc(100% - var(--stroke)));
88    box-shadow:
89      0 0 8px rgba(24,230,200,.55),
90      0 0 16px rgba(24,230,200,.22);
91    animation: pulse var(--dur) ease-in-out infinite;
92  }
93
94  /* faint inner dark center edge */
95  .core{
96    position:absolute;
97    inset:11px;
98    border-radius:50%;
99    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
100    background:transparent;
101  }
102
103  @keyframes spin{
104    from{ transform:rotate(0deg); }
105    to{ transform:rotate(360deg); }
106  }
107
108  /* brightness cycle matching alternating bright/dim frames */
109  @keyframes pulse{
110    0%, 100%{
111      opacity:.18;
112      transform:scale(.94);
113      filter:blur(6px);
114    }
115    18%{
116      opacity:.95;
117      transform:scale(1);
118      filter:blur(4px);
119    }
120    34%{
121      opacity:.22;
122      transform:scale(.95);
123      filter:blur(6px);
124    }
125    52%{
126      opacity:.98;
127      transform:scale(1.01);
128      filter:blur(4px);
129    }
130    68%{
131      opacity:.2;
132      transform:scale(.95);
133      filter:blur(6px);
134    }
135    86%{
136      opacity:.92;
137      transform:scale(1);
138      filter:blur(4px);
139    }
140  }
141</style>
142</head>
143<body>
144  <div class="wrap">
145    <div class="ring"></div>
146    <div class="core"></div>
147  </div>
148</body>
149</html>