model output
GPT-5.4

flat loading animate
A 0.95T 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.0" />
6<title>Two Dot Pulse</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --red:#ff5757;
11    --blue:#16a6cf;
12    --big:24px;
13    --small:14px;
14    --gap:16px;
15    --dur:1.2s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    display:grid;
28    place-items:center;
29  }
30
31  .loader{
32    position:relative;
33    width:90px;
34    height:40px;
35  }
36
37  .dot{
38    position:absolute;
39    top:50%;
40    border-radius:50%;
41    transform:translateY(-50%);
42    animation:swap var(--dur) ease-in-out infinite;
43  }
44
45  .red{
46    left:18px;
47    background:var(--red);
48    animation-name:redPulse;
49  }
50
51  .blue{
52    left:42px;
53    background:var(--blue);
54    animation-name:bluePulse;
55  }
56
57  @keyframes redPulse{
58    0%, 100%{
59      width:var(--big);
60      height:var(--big);
61      transform:translateY(-50%) scale(1);
62    }
63    25%{
64      width:var(--small);
65      height:var(--small);
66      transform:translateY(-50%) scale(1);
67    }
68    50%{
69      width:var(--big);
70      height:var(--big);
71      transform:translateY(-50%) scale(1);
72    }
73    75%{
74      width:var(--big);
75      height:var(--big);
76      transform:translateY(-50%) scale(1);
77    }
78  }
79
80  @keyframes bluePulse{
81    0%, 100%{
82      width:var(--big);
83      height:var(--big);
84      transform:translateY(-50%) scale(1);
85    }
86    25%{
87      width:var(--big);
88      height:var(--big);
89      transform:translateY(-50%) scale(1);
90    }
91    50%{
92      width:var(--small);
93      height:var(--small);
94      transform:translateY(-50%) scale(1);
95    }
96    75%{
97      width:var(--big);
98      height:var(--big);
99      transform:translateY(-50%) scale(1);
100    }
101  }
102</style>
103</head>
104<body>
105  <div class="loader" aria-label="loading animation">
106    <div class="dot red"></div>
107    <div class="dot blue"></div>
108  </div>
109</body>
110</html>