model output
GPT-5.4

flat loading animate
A 0.95T 0.27
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>Four Dot Orbit Loader</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --size:40px;      /* orbit diameter */
11    --dot:20px;       /* dot size */
12    --dur:1.2s;
13    --ease:cubic-bezier(.45,.05,.55,.95);
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27  }
28
29  .loader{
30    position:relative;
31    width:calc(var(--size) + var(--dot));
32    height:calc(var(--size) + var(--dot));
33  }
34
35  .dot{
36    position:absolute;
37    left:50%;
38    top:50%;
39    width:var(--dot);
40    height:var(--dot);
41    margin-left:calc(var(--dot) / -2);
42    margin-top:calc(var(--dot) / -2);
43    border-radius:50%;
44    animation:orbit var(--dur) var(--ease) infinite;
45    will-change:transform;
46    box-shadow:0 0 0 0.5px rgba(0,0,0,.03);
47  }
48
49  .d1{ background:#234f63; animation-delay:0s; }
50  .d2{ background:#12b8b0; animation-delay:calc(var(--dur) * -0.25); }
51  .d3{ background:#ff5257; animation-delay:calc(var(--dur) * -0.50); }
52  .d4{ background:#ffb35a; animation-delay:calc(var(--dur) * -0.75); }
53
54  /* Each dot moves on the same circular path, phase-shifted by 90deg.
55     This reproduces the square -> diamond -> square cycle seen in the frames. */
56  @keyframes orbit{
57    0%   { transform:rotate(0deg) translateY(calc(var(--size) / -2)) rotate(0deg); }
58    25%  { transform:rotate(90deg) translateY(calc(var(--size) / -2)) rotate(-90deg); }
59    50%  { transform:rotate(180deg) translateY(calc(var(--size) / -2)) rotate(-180deg); }
60    75%  { transform:rotate(270deg) translateY(calc(var(--size) / -2)) rotate(-270deg); }
61    100% { transform:rotate(360deg) translateY(calc(var(--size) / -2)) rotate(-360deg); }
62  }
63</style>
64</head>
65<body>
66  <div class="loader" aria-label="loading animation">
67    <div class="dot d1"></div>
68    <div class="dot d2"></div>
69    <div class="dot d3"></div>
70    <div class="dot d4"></div>
71  </div>
72</body>
73</html>