model output
GPT-5.4

CSS3 loading animations
A 0.83T 0.25
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" />
6<title>Red Orbit Dots</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --red:#d61f3d;
11    --red2:#ff4a63;
12    --size:4px;
13    --radius:14px;
14    --dur:1.15s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23  }
24
25  .stage{
26    position:relative;
27    width:100vw;
28    height:100vh;
29    background:var(--bg);
30  }
31
32  /* small cluster placed near top-center like the frames */
33  .cluster{
34    position:absolute;
35    left:50%;
36    top:6.2%;
37    width:0;
38    height:0;
39    transform:translateX(1px);
40  }
41
42  .orbit{
43    position:absolute;
44    left:0;
45    top:0;
46    width:0;
47    height:0;
48    animation:spin var(--dur) linear infinite;
49  }
50
51  .dot{
52    position:absolute;
53    width:var(--size);
54    height:var(--size);
55    margin:calc(var(--size) / -2);
56    border-radius:50%;
57    background:radial-gradient(circle at 35% 35%, #ff8a98 0%, var(--red2) 28%, var(--red) 62%, #7d0f24 100%);
58    box-shadow:
59      0 0 3px rgba(214,31,61,.75),
60      0 0 6px rgba(214,31,61,.28);
61    transform:
62      rotate(calc(var(--i) * 18deg))
63      translateX(var(--radius))
64      scale(calc(.72 + var(--i) * .06));
65    opacity:calc(.35 + var(--i) * .16);
66  }
67
68  /* slight asymmetry to mimic the uneven 3-dot arc */
69  .dot:nth-child(1){ --i:0; }
70  .dot:nth-child(2){ --i:1; transform:rotate(18deg) translateX(calc(var(--radius) - 1px)) scale(.82); }
71  .dot:nth-child(3){ --i:2; transform:rotate(36deg) translateX(calc(var(--radius) - 2px)) scale(.95); }
72
73  @keyframes spin{
74    from{ transform:rotate(-18deg); }
75    to{ transform:rotate(342deg); }
76  }
77</style>
78</head>
79<body>
80  <div class="stage">
81    <div class="cluster">
82      <div class="orbit">
83        <span class="dot"></span>
84        <span class="dot"></span>
85        <span class="dot"></span>
86      </div>
87    </div>
88  </div>
89</body>
90</html>