model output
GPT-5.4

Animated Concepts #3
A 0.91T 0.27
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>Bouncing Dot Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --accent:#ff7f79;
11    --duration:1.15s;
12  }
13
14  html,body{
15    margin:0;
16    width:100%;
17    height:100%;
18    background:var(--bg);
19    overflow:hidden;
20    font-family:sans-serif;
21  }
22
23  .stage{
24    width:100%;
25    height:100%;
26    display:grid;
27    place-items:center;
28  }
29
30  .loader{
31    position:relative;
32    width:76px;
33    height:92px;
34  }
35
36  .bar{
37    position:absolute;
38    left:50%;
39    bottom:18px;
40    width:76px;
41    height:5px;
42    transform:translateX(-50%);
43    background:var(--accent);
44    border-radius:999px;
45  }
46
47  .dot{
48    position:absolute;
49    left:50%;
50    bottom:23px;
51    width:18px;
52    height:18px;
53    margin-left:-9px;
54    border-radius:50%;
55    background:var(--accent);
56    transform-origin:center bottom;
57    animation:bounce var(--duration) cubic-bezier(.38,0,.22,1) infinite;
58  }
59
60  @keyframes bounce{
61    0%{
62      transform:translateY(0) scale(1.05,.82);
63    }
64    8%{
65      transform:translateY(-2px) scale(.98,1.02);
66    }
67    18%{
68      transform:translateY(-44px) scale(.72);
69    }
70    34%{
71      transform:translateY(-74px) scale(.58);
72    }
73    50%{
74      transform:translateY(-44px) scale(.72);
75    }
76    72%{
77      transform:translateY(0) scale(1.08,.78);
78    }
79    80%{
80      transform:translateY(0) scale(.92,1.06);
81    }
82    100%{
83      transform:translateY(0) scale(1.05,.82);
84    }
85  }
86</style>
87</head>
88<body>
89  <div class="stage">
90    <div class="loader" aria-label="loading animation">
91      <div class="dot"></div>
92      <div class="bar"></div>
93    </div>
94  </div>
95</body>
96</html>