model output
GPT-5.4

flat loading animate
A 0.89T 0.35
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 Loader Replica</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --dot:#18b7dc;
11    --ghost:rgba(24,183,220,.12);
12    --size:20px;
13    --gap:22px;
14    --dur:1.05s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23    font-family:sans-serif;
24  }
25
26  body{
27    display:grid;
28    place-items:center;
29  }
30
31  .loader{
32    position:relative;
33    width:calc(var(--gap) * 4);
34    height:var(--size);
35  }
36
37  .dot{
38    position:absolute;
39    top:0;
40    width:var(--size);
41    height:var(--size);
42    border-radius:50%;
43    background:var(--dot);
44    animation:slide var(--dur) cubic-bezier(.4,0,.2,1) infinite;
45    will-change:transform, opacity;
46  }
47
48  .dot:nth-child(1){ left:0; animation-delay:0s; }
49  .dot:nth-child(2){ left:0; animation-delay:calc(var(--dur) * -0.25); }
50  .dot:nth-child(3){ left:0; animation-delay:calc(var(--dur) * -0.5); }
51  .dot:nth-child(4){
52    left:0;
53    background:var(--ghost);
54    filter:blur(.2px);
55    animation-delay:calc(var(--dur) * -0.75);
56  }
57
58  @keyframes slide{
59    0%{
60      transform:translateX(0);
61      opacity:1;
62    }
63    70%{
64      transform:translateX(calc(var(--gap) * 3));
65      opacity:1;
66    }
67    100%{
68      transform:translateX(calc(var(--gap) * 3));
69      opacity:.18;
70    }
71  }
72
73  /* keep the rightmost dot faint like the reference */
74  .loader::after{
75    content:"";
76    position:absolute;
77    top:0;
78    left:calc(var(--gap) * 3);
79    width:var(--size);
80    height:var(--size);
81    border-radius:50%;
82    background:var(--ghost);
83    filter:blur(.2px);
84    pointer-events:none;
85  }
86</style>
87</head>
88<body>
89  <div class="loader" aria-label="Loading">
90    <span class="dot"></span>
91    <span class="dot"></span>
92    <span class="dot"></span>
93    <span class="dot"></span>
94  </div>
95</body>
96</html>