model output
GPT-5.4

flat loading animate
A 0.90T 0.24
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  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #ffffff;
13    overflow: hidden;
14  }
15
16  .stage {
17    width: 100vw;
18    height: 100vh;
19    display: grid;
20    place-items: center;
21  }
22
23  .dot {
24    width: 96px;
25    height: 96px;
26    border-radius: 50%;
27    background: #ff5757;
28    position: relative;
29    animation: pulse 1.6s ease-in-out infinite;
30    transform-origin: center;
31  }
32
33  /* brief opening ring impression seen in first frame */
34  .dot::before {
35    content: "";
36    position: absolute;
37    inset: 0;
38    border-radius: 50%;
39    box-sizing: border-box;
40    border: 22px solid #ff5757;
41    animation: ringFade 1.6s ease-in-out infinite;
42  }
43
44  @keyframes pulse {
45    0% {
46      transform: scale(0.78);
47    }
48    12% {
49      transform: scale(0.98);
50    }
51    22% {
52      transform: scale(1);
53    }
54    50% {
55      transform: scale(1);
56    }
57    100% {
58      transform: scale(1);
59    }
60  }
61
62  @keyframes ringFade {
63    0% {
64      opacity: 1;
65      transform: scale(1);
66    }
67    10% {
68      opacity: 0;
69      transform: scale(1.02);
70    }
71    100% {
72      opacity: 0;
73      transform: scale(1.02);
74    }
75  }
76</style>
77</head>
78<body>
79  <div class="stage">
80    <div class="dot"></div>
81  </div>
82</body>
83</html>