model output
GPT-5.4

Such Spinners, Much Loading
A 0.78T 0.21
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>Dot Pulse</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --dot:#333333;
11    --size:50px;
12    --inner:18px;
13    --ring:6px;
14    --dur:1.2s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28  }
29
30  .loader{
31    position:relative;
32    width:var(--size);
33    height:var(--size);
34  }
35
36  .solid,
37  .ring{
38    position:absolute;
39    inset:0;
40    border-radius:50%;
41    animation-duration:var(--dur);
42    animation-iteration-count:infinite;
43    animation-timing-function:ease-in-out;
44  }
45
46  .solid{
47    background:var(--dot);
48    animation-name:solidPulse;
49  }
50
51  .ring{
52    box-sizing:border-box;
53    border:var(--ring) solid var(--dot);
54    animation-name:ringPulse;
55  }
56
57  .ring::after{
58    content:"";
59    position:absolute;
60    left:50%;
61    top:50%;
62    width:var(--inner);
63    height:var(--inner);
64    transform:translate(-50%,-50%);
65    border-radius:50%;
66    background:var(--bg);
67  }
68
69  @keyframes solidPulse{
70    0%, 41.666%, 100%{
71      opacity:1;
72      transform:scale(1);
73    }
74    50%, 91.666%{
75      opacity:0;
76      transform:scale(1);
77    }
78  }
79
80  @keyframes ringPulse{
81    0%, 41.666%, 100%{
82      opacity:0;
83      transform:scale(1);
84    }
85    50%, 91.666%{
86      opacity:1;
87      transform:scale(1);
88    }
89  }
90</style>
91</head>
92<body>
93  <div class="loader" aria-label="loading animation">
94    <div class="solid"></div>
95    <div class="ring"></div>
96  </div>
97</body>
98</html>