model output
GPT-5.4

Such Spinners, Much Loading
A 0.83T 0.28
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 Dot Blink Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #ffffff;
13    overflow: hidden;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #fff;
21  }
22
23  .dot {
24    position: absolute;
25    left: 50%;
26    top: 50%;
27    width: 22px;
28    height: 22px;
29    margin-left: -11px;
30    margin-top: -11px;
31    border-radius: 50%;
32    background: #9a9a9a;
33    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.04);
34    transform: translateZ(0) scale(1);
35    opacity: 0;
36    animation: blinkDot 2.5s linear infinite;
37  }
38
39  @keyframes blinkDot {
40    0%   { opacity: 0; transform: scale(1); }
41    18%  { opacity: 0; transform: scale(1); }
42
43    20%  { opacity: 1; transform: scale(1); }
44    38%  { opacity: 1; transform: scale(1); }
45
46    40%  { opacity: 0; transform: scale(1); }
47    58%  { opacity: 0; transform: scale(1); }
48
49    60%  { opacity: 1; transform: scale(1); }
50    78%  { opacity: 1; transform: scale(1); }
51
52    80%  { opacity: 0; transform: scale(1); }
53    100% { opacity: 0; transform: scale(1); }
54  }
55</style>
56</head>
57<body>
58  <div class="stage">
59    <div class="dot"></div>
60  </div>
61</body>
62</html>