model output
GPT-5.4

flat loading animate
A 0.96T 0.58
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 Loader</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #ffffff;
13    overflow: hidden;
14  }
15
16  body {
17    display: grid;
18    place-items: center;
19  }
20
21  .loader {
22    position: relative;
23    width: 72px;
24    height: 72px;
25    animation: spin 1.2s linear infinite;
26    transform-origin: 50% 50%;
27  }
28
29  .dot {
30    position: absolute;
31    width: 44px;
32    height: 44px;
33    border-radius: 50%;
34    top: 50%;
35    left: 50%;
36    margin: -22px;
37  }
38
39  .blue {
40    background: #16a6cf;
41    transform: translateY(-25px);
42  }
43
44  .red {
45    background: #ff5a57;
46    transform: translateY(25px);
47  }
48
49  @keyframes spin {
50    0%   { transform: rotate(0deg); }
51    25%  { transform: rotate(90deg); }
52    50%  { transform: rotate(180deg); }
53    75%  { transform: rotate(270deg); }
54    100% { transform: rotate(360deg); }
55  }
56</style>
57</head>
58<body>
59  <div class="loader" aria-label="loading animation">
60    <div class="dot blue"></div>
61    <div class="dot red"></div>
62  </div>
63</body>
64</html>