model output
GPT-5.4

flat loading animate
A 0.74T 0.14
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>Minimal Dot Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --dot:#ff5a57;
11    --w:30px;
12    --h:34px;
13    --dur:1.2s;
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  .stage{
30    position:relative;
31    width:100vw;
32    height:100vh;
33    background:#fff;
34  }
35
36  .dot{
37    position:absolute;
38    left:50%;
39    top:50%;
40    width:var(--w);
41    height:var(--h);
42    margin-left:calc(var(--w) / -2);
43    margin-top:calc(var(--h) / -2);
44    background:radial-gradient(circle at 35% 35%, #ff6b68 0%, #ff5a57 55%, #ff4d4a 100%);
45    border-radius:50%;
46    transform:translateY(0) scaleX(0.88) scaleY(1.02);
47    animation:bob var(--dur) ease-in-out infinite;
48    will-change:transform;
49  }
50
51  @keyframes bob{
52    0%   { transform:translateY(-2px) scaleX(0.88) scaleY(1.02); }
53    25%  { transform:translateY(1px)  scaleX(0.90) scaleY(1.00); }
54    50%  { transform:translateY(4px)  scaleX(1.00) scaleY(0.92); }
55    75%  { transform:translateY(1px)  scaleX(0.92) scaleY(1.00); }
56    100% { transform:translateY(-2px) scaleX(0.88) scaleY(1.02); }
57  }
58</style>
59</head>
60<body>
61  <div class="stage">
62    <div class="dot"></div>
63  </div>
64</body>
65</html>