model output
GPT-5.4

CSS3 loading animations
A 0.90T 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" />
6<title>Minimal Wobbling Bars</title>
7<style>
8  :root{
9    --bg:#1b1b1b;
10    --bar:#8f8794;
11    --shadow:rgba(0,0,0,.55);
12    --w:6px;
13    --h:36px;
14    --gap:6px;
15    --count:5;
16    --dur:1.45s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    overflow:hidden;
24    background:var(--bg);
25  }
26
27  body{
28    position:relative;
29    font-family:system-ui,sans-serif;
30  }
31
32  .wrap{
33    position:absolute;
34    left:50%;
35    top:58px;
36    width:calc(var(--count) * var(--w) + (var(--count) - 1) * var(--gap));
37    height:44px;
38    transform:translateX(-50%);
39    filter:drop-shadow(8px 10px 8px rgba(0,0,0,.38));
40  }
41
42  .bars{
43    position:relative;
44    width:100%;
45    height:100%;
46    animation:sway var(--dur) ease-in-out infinite;
47    transform-origin:50% 100%;
48  }
49
50  .bar{
51    position:absolute;
52    bottom:0;
53    width:var(--w);
54    height:var(--h);
55    border-radius:1px;
56    background:linear-gradient(to bottom, #7f7784 0%, #9a919d 55%, #8b8390 100%);
57    transform-origin:50% 100%;
58    animation:tilt var(--dur) ease-in-out infinite;
59  }
60
61  .bar:nth-child(1){ left:0px;   animation-delay:-0.08s; }
62  .bar:nth-child(2){ left:12px;  animation-delay:-0.04s; }
63  .bar:nth-child(3){ left:24px;  animation-delay:0s; }
64  .bar:nth-child(4){ left:36px;  animation-delay:0.04s; }
65  .bar:nth-child(5){ left:48px;  animation-delay:0.08s; }
66
67  @keyframes sway{
68    0%,100% { transform:translateX(0) rotate(-1.5deg); }
69    25%     { transform:translateX(1px) rotate(2.2deg); }
70    50%     { transform:translateX(0.5px) rotate(-1deg); }
71    75%     { transform:translateX(-1px) rotate(2.8deg); }
72  }
73
74  @keyframes tilt{
75    0%,100% { transform:skewY(0deg) scaleY(1); }
76    20%     { transform:skewY(-2deg) scaleY(1.01); }
77    35%     { transform:skewY(2.5deg) scaleY(1); }
78    50%     { transform:skewY(-1deg) scaleY(.99); }
79    70%     { transform:skewY(3deg) scaleY(1.01); }
80    85%     { transform:skewY(-2deg) scaleY(1); }
81  }
82</style>
83</head>
84<body>
85  <div class="wrap">
86    <div class="bars">
87      <span class="bar"></span>
88      <span class="bar"></span>
89      <span class="bar"></span>
90      <span class="bar"></span>
91      <span class="bar"></span>
92    </div>
93  </div>
94</body>
95</html>