model output
GPT-5.4

Such Spinners, Much Loading
A 0.79T 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>Dot Merge Loader</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #ffffff;
13    overflow: hidden;
14  }
15
16  body {
17    display: grid;
18    place-items: center;
19  }
20
21  .loader {
22    position: relative;
23    width: 80px;
24    height: 80px;
25  }
26
27  .dot {
28    position: absolute;
29    left: 50%;
30    top: 50%;
31    width: 10px;
32    height: 10px;
33    margin: -5px 0 0 -5px;
34    border-radius: 50%;
35    background: #5f6064;
36    animation: orbit 1.2s ease-in-out infinite;
37  }
38
39  .dot.a {
40    animation-delay: 0s;
41  }
42
43  .dot.b {
44    animation-delay: -0.6s;
45  }
46
47  .core {
48    position: absolute;
49    left: 50%;
50    top: 50%;
51    width: 26px;
52    height: 26px;
53    margin: -13px 0 0 -13px;
54    border-radius: 50%;
55    background: #2f2f31;
56    transform: scale(0);
57    animation: pulse 1.2s ease-in-out infinite;
58  }
59
60  @keyframes orbit {
61    0%, 100% {
62      transform: translate(-25px, 0);
63      opacity: 1;
64    }
65    25% {
66      transform: translate(0, 0);
67      opacity: 0;
68    }
69    50% {
70      transform: translate(15px, 20px);
71      opacity: 1;
72    }
73    75% {
74      transform: translate(0, 0);
75      opacity: 0;
76    }
77  }
78
79  .dot.b {
80    animation-name: orbitB;
81  }
82
83  @keyframes orbitB {
84    0%, 100% {
85      transform: translate(25px, 0);
86      opacity: 1;
87    }
88    25% {
89      transform: translate(0, 0);
90      opacity: 0;
91    }
92    50% {
93      transform: translate(-15px, -20px);
94      opacity: 1;
95    }
96    75% {
97      transform: translate(0, 0);
98      opacity: 0;
99    }
100  }
101
102  @keyframes pulse {
103    0%, 20%, 55%, 70%, 100% {
104      transform: scale(0);
105      opacity: 0;
106    }
107    25%, 50% {
108      transform: scale(1);
109      opacity: 1;
110    }
111    75%, 95% {
112      transform: scale(1);
113      opacity: 1;
114    }
115  }
116</style>
117</head>
118<body>
119  <div class="loader" aria-label="loading animation">
120    <div class="core"></div>
121    <div class="dot a"></div>
122    <div class="dot b"></div>
123  </div>
124</body>
125</html>