model output
GPT-5.4

flat loading animate
A 0.95T 0.24
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>Rotating Dot Cross</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --dark:#234f5d;
11    --teal:#12b3a6;
12    --coral:#ff5a57;
13    --orange:#ffb35a;
14
15    --r1:14px;
16    --r2:30px;
17    --r3:50px;
18
19    --s1:8px;
20    --s2:12px;
21    --s3:20px;
22
23    --dur:1.2s;
24    --ease:cubic-bezier(.55,.08,.45,.92);
25  }
26
27  html,body{
28    margin:0;
29    width:100%;
30    height:100%;
31    background:var(--bg);
32    overflow:hidden;
33    font-family:sans-serif;
34  }
35
36  .stage{
37    position:relative;
38    width:100vw;
39    height:100vh;
40  }
41
42  .spinner{
43    position:absolute;
44    left:50%;
45    top:50%;
46    width:0;
47    height:0;
48    transform:translate(-50%,-50%);
49    animation:spin var(--dur) var(--ease) infinite;
50  }
51
52  .arm{
53    position:absolute;
54    left:0;
55    top:0;
56    width:0;
57    height:0;
58  }
59
60  .dot{
61    position:absolute;
62    left:0;
63    top:0;
64    border-radius:50%;
65    transform:translate(-50%,-50%);
66  }
67
68  .arm.top    { transform:rotate(-90deg); }
69  .arm.right  { transform:rotate(0deg); }
70  .arm.bottom { transform:rotate(90deg); }
71  .arm.left   { transform:rotate(180deg); }
72
73  .arm.top .dot    { background:var(--dark); }
74  .arm.right .dot  { background:var(--coral); }
75  .arm.bottom .dot { background:var(--orange); }
76  .arm.left .dot   { background:var(--teal); }
77
78  .d1{ width:var(--s1); height:var(--s1); left:var(--r1); }
79  .d2{ width:var(--s2); height:var(--s2); left:var(--r2); }
80  .d3{ width:var(--s3); height:var(--s3); left:var(--r3); }
81
82  @keyframes spin{
83    0%, 20%   { transform:translate(-50%,-50%) rotate(0deg); }
84    30%, 70%  { transform:translate(-50%,-50%) rotate(45deg); }
85    80%, 100% { transform:translate(-50%,-50%) rotate(90deg); }
86  }
87</style>
88</head>
89<body>
90  <div class="stage">
91    <div class="spinner" aria-hidden="true">
92      <div class="arm top">
93        <div class="dot d1"></div>
94        <div class="dot d2"></div>
95        <div class="dot d3"></div>
96      </div>
97      <div class="arm right">
98        <div class="dot d1"></div>
99        <div class="dot d2"></div>
100        <div class="dot d3"></div>
101      </div>
102      <div class="arm bottom">
103        <div class="dot d1"></div>
104        <div class="dot d2"></div>
105        <div class="dot d3"></div>
106      </div>
107      <div class="arm left">
108        <div class="dot d1"></div>
109        <div class="dot d2"></div>
110        <div class="dot d3"></div>
111      </div>
112    </div>
113  </div>
114</body>
115</html>