model output
GPT-5.4

Wavy Loading Animations
A 0.65T 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>Striped Wedge Animation</title>
7<style>
8  :root{
9    --bg:#f2f2f2;
10    --bar:#7a7a7a;
11    --bars:11;
12    --w:6px;
13    --gap:2px;
14    --maxh:58px;
15    --minh:4px;
16    --dur:1.35s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    overflow:hidden;
24    background:var(--bg);
25    font-family:sans-serif;
26  }
27
28  .stage{
29    position:relative;
30    width:100vw;
31    height:100vh;
32    background:var(--bg);
33  }
34
35  .shape{
36    position:absolute;
37    left:50%;
38    top:10.5%;
39    width:calc(var(--bars) * (var(--w) + var(--gap)));
40    height:72px;
41    transform:translateX(-50%);
42  }
43
44  .bars{
45    position:absolute;
46    left:0;
47    top:50%;
48    display:flex;
49    align-items:flex-end;
50    gap:var(--gap);
51    transform-origin:50% 50%;
52    animation:flip var(--dur) ease-in-out infinite;
53  }
54
55  .bar{
56    width:var(--w);
57    background:var(--bar);
58    border-radius:1px;
59    height:calc(var(--minh) + (var(--h) * 1px));
60  }
61
62  @keyframes flip{
63    0%, 18%{
64      transform:translateY(-50%) rotate(-80deg);
65    }
66    32%, 50%{
67      transform:translateY(-50%) rotate(0deg);
68    }
69    68%, 86%{
70      transform:translateY(-50%) rotate(80deg);
71    }
72    100%{
73      transform:translateY(-50%) rotate(-80deg);
74    }
75  }
76</style>
77</head>
78<body>
79  <div class="stage">
80    <div class="shape">
81      <div class="bars" id="bars"></div>
82    </div>
83  </div>
84
85<script>
86  const bars = document.getElementById('bars');
87
88  // Heights tuned to resemble the frames:
89  // a striped wedge that appears narrow when rotated and fuller when upright.
90  const heights = [26, 31, 36, 41, 46, 50, 53, 55, 56, 54, 52];
91
92  heights.forEach(h => {
93    const el = document.createElement('span');
94    el.className = 'bar';
95    el.style.setProperty('--h', h);
96    bars.appendChild(el);
97  });
98</script>
99</body>
100</html>