model output
GPT-5.4

Wavy Loading Animations
A 0.85T 0.28
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    --dark:#5f5f5f;
11    --mid:#8a8a8a;
12    --light:#bdbdbd;
13    --bars:8;
14    --w:4px;
15    --gap:2px;
16    --maxH:40px;
17    --minH:8px;
18    --dur:1.2s;
19  }
20
21  html,body{
22    margin:0;
23    width:100%;
24    height:100%;
25    background:var(--bg);
26    overflow:hidden;
27    font-family:sans-serif;
28  }
29
30  .stage{
31    position:relative;
32    width:100%;
33    height:100%;
34  }
35
36  .eq{
37    position:absolute;
38    left:50%;
39    top:58px;
40    transform:translateX(-50%);
41    display:flex;
42    align-items:flex-end;
43    gap:var(--gap);
44    height:var(--maxH);
45  }
46
47  .bar{
48    width:var(--w);
49    height:var(--minH);
50    background:linear-gradient(to bottom, var(--c1), var(--c2));
51    animation: bars var(--dur) linear infinite;
52    animation-delay:var(--d);
53    transform-origin:center bottom;
54  }
55
56  @keyframes bars{
57    0%, 100%{
58      height:calc(var(--minH) + (var(--amp) * 0.95));
59    }
60    25%{
61      height:calc(var(--minH) + (var(--amp) * 0.18));
62    }
63    50%{
64      height:calc(var(--minH) + (var(--amp) * 0.95));
65    }
66    75%{
67      height:calc(var(--minH) + (var(--amp) * 0.18));
68    }
69  }
70</style>
71</head>
72<body>
73  <div class="stage">
74    <div class="eq" aria-hidden="true">
75      <span class="bar" style="--amp:28px; --d:0s;    --c1:#5f5f5f; --c2:#6a6a6a;"></span>
76      <span class="bar" style="--amp:22px; --d:-0.075s; --c1:#666; --c2:#727272;"></span>
77      <span class="bar" style="--amp:16px; --d:-0.15s;  --c1:#707070; --c2:#7d7d7d;"></span>
78      <span class="bar" style="--amp:10px; --d:-0.225s; --c1:#7b7b7b; --c2:#888;"></span>
79      <span class="bar" style="--amp:10px; --d:-0.225s; --c1:#9f9f9f; --c2:#ababab;"></span>
80      <span class="bar" style="--amp:16px; --d:-0.15s;  --c1:#a8a8a8; --c2:#b4b4b4;"></span>
81      <span class="bar" style="--amp:22px; --d:-0.075s; --c1:#b0b0b0; --c2:#bcbcbc;"></span>
82      <span class="bar" style="--amp:28px; --d:0s;    --c1:#b8b8b8; --c2:#c4c4c4;"></span>
83    </div>
84  </div>
85
86<script>
87  // Start phase adjusted so the initial pose matches the shown "rising to the right" frame.
88  const eq = document.querySelector('.eq');
89  const bars = [...document.querySelectorAll('.bar')];
90  const duration = 1.2;
91  const phaseOffset = 0.6; // seconds
92
93  bars.forEach((bar, i) => {
94    const current = getComputedStyle(bar).animationDelay;
95    const delay = parseFloat(current) || 0;
96    bar.style.animationDelay = `${delay - phaseOffset}s`;
97  });
98</script>
99</body>
100</html>