model output
GPT-5.4

Nice spinny stuff
A 0.96T 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>Pink Dot Loader</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --pink: rgba(247, 170, 193, 0.72);
11    --size: 8px;
12    --radius: 42px;
13    --duration: 1.2s;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22    font-family:sans-serif;
23  }
24
25  .stage{
26    position:relative;
27    width:100%;
28    height:100%;
29    background:#fff;
30  }
31
32  /* Positioned to match the upper-left placement in the frames */
33  .loader{
34    position:absolute;
35    left:158px;
36    top:158px;
37    width:0;
38    height:0;
39    animation: spin var(--duration) linear infinite;
40  }
41
42  .dot{
43    position:absolute;
44    left:0;
45    top:0;
46    width:var(--size);
47    height:var(--size);
48    margin-left:calc(var(--size) / -2);
49    margin-top:calc(var(--size) / -2);
50    border-radius:50%;
51    background:var(--pink);
52    transform:
53      rotate(calc(var(--i) * 45deg))
54      translateY(calc(var(--radius) * -1));
55    animation: pulse var(--duration) ease-in-out infinite;
56    animation-delay: calc(var(--i) * -0.15s);
57    filter: blur(0.15px);
58  }
59
60  @keyframes spin{
61    from{ transform: rotate(0deg); }
62    to{ transform: rotate(360deg); }
63  }
64
65  /* Creates the alternating larger/smaller dots seen in the frames */
66  @keyframes pulse{
67    0%, 100%{
68      opacity:.45;
69      width:4px;
70      height:4px;
71      margin-left:-2px;
72      margin-top:-2px;
73    }
74    50%{
75      opacity:.9;
76      width:12px;
77      height:12px;
78      margin-left:-6px;
79      margin-top:-6px;
80    }
81  }
82</style>
83</head>
84<body>
85  <div class="stage">
86    <div class="loader" aria-label="loading">
87      <span class="dot" style="--i:0"></span>
88      <span class="dot" style="--i:1"></span>
89      <span class="dot" style="--i:2"></span>
90      <span class="dot" style="--i:3"></span>
91      <span class="dot" style="--i:4"></span>
92      <span class="dot" style="--i:5"></span>
93      <span class="dot" style="--i:6"></span>
94      <span class="dot" style="--i:7"></span>
95    </div>
96  </div>
97</body>
98</html>