model output
GPT-5.4

flat loading animate
A 0.94T 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>Two Dot Swap Loader</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --red:#ff5a57;
11    --blue:#18a9d5;
12    --size:30px;
13    --gap:64px;
14    --dur:1s;
15  }
16
17  html,body{
18    height:100%;
19    margin:0;
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(--gap) + var(--size));
32    height:var(--size);
33  }
34
35  .dot{
36    position:absolute;
37    top:50%;
38    width:var(--size);
39    height:var(--size);
40    margin-top:calc(var(--size) / -2);
41    border-radius:50%;
42    animation: swap var(--dur) ease-in-out infinite;
43    will-change: transform;
44  }
45
46  .red{
47    left:0;
48    background:var(--red);
49    animation-delay:0s;
50  }
51
52  .blue{
53    left:calc(var(--gap));
54    background:var(--blue);
55    animation-delay:calc(var(--dur) / -2);
56  }
57
58  @keyframes swap{
59    0%, 100%{
60      transform:translateX(0);
61    }
62    50%{
63      transform:translateX(var(--gap));
64    }
65  }
66</style>
67</head>
68<body>
69  <div class="loader" aria-label="loading animation">
70    <div class="dot red"></div>
71    <div class="dot blue"></div>
72  </div>
73</body>
74</html>