model output
Claude Sonnet 4.6

Such Spinners, Much Loading
A 0.68T 0.31
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 Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #fff;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18
19  .container {
20    position: relative;
21    width: 60px;
22    height: 60px;
23  }
24
25  .dot {
26    position: absolute;
27    width: 10px;
28    height: 10px;
29    border-radius: 50%;
30    background: #3d3d3d;
31    top: 50%;
32    left: 50%;
33    transform: translate(-50%, -50%);
34  }
35
36  .dot1 {
37    animation: orbit1 1.2s ease-in-out infinite;
38  }
39
40  .dot2 {
41    animation: orbit2 1.2s ease-in-out infinite;
42  }
43
44  @keyframes orbit1 {
45    0%   { transform: translate(calc(-50% - 25px), -50%) scale(0.7); }
46    25%  { transform: translate(-50%, calc(-50% - 20px)) scale(1); }
47    50%  { transform: translate(calc(-50% + 25px), -50%) scale(0.7); }
48    75%  { transform: translate(-50%, calc(-50% + 20px)) scale(1); }
49    100% { transform: translate(calc(-50% - 25px), -50%) scale(0.7); }
50  }
51
52  @keyframes orbit2 {
53    0%   { transform: translate(calc(-50% + 25px), -50%) scale(0.7); }
54    25%  { transform: translate(-50%, calc(-50% + 20px)) scale(1); }
55    50%  { transform: translate(calc(-50% - 25px), -50%) scale(0.7); }
56    75%  { transform: translate(-50%, calc(-50% - 20px)) scale(1); }
57    100% { transform: translate(calc(-50% + 25px), -50%) scale(0.7); }
58  }
59</style>
60</head>
61<body>
62  <div class="container">
63    <div class="dot dot1"></div>
64    <div class="dot dot2"></div>
65  </div>
66</body>
67</html>