model output
GPT-5.4

Wavy Loading Animations
A 0.71T 0.43
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 Equalizer Arc Animation</title>
7<style>
8  :root{
9    --bg:#f3f3f3;
10    --bar:#8f8f8f;
11    --bar-dark:#6f6f6f;
12    --line:#2f2f2f;
13    --bars:10;
14    --w:92px;
15    --h:26px;
16    --gap:1px;
17    --bw:8px;
18  }
19
20  html,body{
21    margin:0;
22    width:100%;
23    height:100%;
24    background:var(--bg);
25    overflow:hidden;
26    font-family:sans-serif;
27  }
28
29  .stage{
30    position:relative;
31    width:100%;
32    height:100%;
33  }
34
35  .loader{
36    position:absolute;
37    left:50%;
38    top:12%;
39    width:var(--w);
40    height:var(--h);
41    transform:translateX(-50%);
42  }
43
44  .baseline{
45    position:absolute;
46    left:0;
47    bottom:0;
48    width:100%;
49    height:1px;
50    background:
51      repeating-linear-gradient(
52        to right,
53        var(--line) 0 7px,
54        transparent 7px 9px
55      );
56    opacity:.95;
57  }
58
59  .bars{
60    position:absolute;
61    inset:0;
62    display:flex;
63    align-items:flex-end;
64    gap:var(--gap);
65  }
66
67  .bar{
68    width:var(--bw);
69    height:4px;
70    background:linear-gradient(to right, #b8b8b8 0%, #a8a8a8 55%, #8f8f8f 100%);
71    transform-origin:bottom center;
72    animation: morph 1.8s linear infinite;
73  }
74
75  .bar:nth-child(1){ animation-delay:0s; }
76  .bar:nth-child(2){ animation-delay:0s; }
77  .bar:nth-child(3){ animation-delay:0s; }
78  .bar:nth-child(4){ animation-delay:0s; }
79  .bar:nth-child(5){ animation-delay:0s; }
80  .bar:nth-child(6){ animation-delay:0s; }
81  .bar:nth-child(7){ animation-delay:0s; }
82  .bar:nth-child(8){ animation-delay:0s; }
83  .bar:nth-child(9){ animation-delay:0s; }
84  .bar:nth-child(10){ animation-delay:0s; }
85
86  /* Three-state cycle inferred from frames:
87     0%   = descending wedge (left high -> right low)
88     33%  = rounded arch
89     66%  = ascending wedge (left low -> right high)
90     100% = back to descending wedge
91  */
92  @keyframes morph{
93    0%,100%{ height:var(--h0); }
94    33.333%{ height:var(--h1); }
95    66.666%{ height:var(--h2); }
96  }
97</style>
98</head>
99<body>
100<div class="stage">
101  <div class="loader">
102    <div class="bars" id="bars"></div>
103    <div class="baseline"></div>
104  </div>
105</div>
106
107<script>
108  const bars = document.getElementById('bars');
109
110  // Heights approximated from the frame sequence
111  const descending = [24,21,18,15,12,9,7,5,3,2];
112  const arch       = [18,21,22,23,24,24,23,22,21,18];
113  const ascending  = [2,3,5,7,9,12,15,18,21,24];
114
115  for(let i=0;i<10;i++){
116    const el = document.createElement('div');
117    el.className = 'bar';
118    el.style.setProperty('--h0', descending[i] + 'px');
119    el.style.setProperty('--h1', arch[i] + 'px');
120    el.style.setProperty('--h2', ascending[i] + 'px');
121    bars.appendChild(el);
122  }
123</script>
124</body>
125</html>