model output
GPT-5.4

Wavy Loading Animations
A 0.69T 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>Minimal Morphing Stripe Animation</title>
7<style>
8  :root{
9    --bg:#f3f3f3;
10    --dark:#4a4a4a;
11    --mid:#8f8f8f;
12    --light:#cfcfcf;
13    --w:62px;
14    --h:34px;
15    --bars:10;
16    --gap:2px;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    background:var(--bg);
24    overflow:hidden;
25    font-family:sans-serif;
26  }
27
28  .stage{
29    position:relative;
30    width:100vw;
31    height:100vh;
32  }
33
34  .spinner{
35    position:absolute;
36    left:50%;
37    top:10.5%;
38    width:var(--w);
39    height:var(--h);
40    transform:translateX(-50%);
41  }
42
43  .bar{
44    position:absolute;
45    top:0;
46    bottom:0;
47    width:4px;
48    border-radius:1px;
49    transform-origin:50% 50%;
50    animation: morph 1.35s linear infinite;
51    background:linear-gradient(to bottom, #9a9a9a, #7f7f7f);
52  }
53
54  @keyframes morph{
55    /* 0%: tiny horizontal dash */
56    0%, 8%{
57      left:calc(50% - 2px);
58      top:15px;
59      height:3px;
60      width:4px;
61      border-radius:1px;
62      opacity:1;
63      transform:none;
64      background:#555;
65    }
66
67    /* 16%: right-pointing wedge */
68    16%, 28%{
69      left:calc(var(--i) * 3px + 14px);
70      top:calc(17px - (var(--i) * 0.9px));
71      height:calc(2px + var(--i) * 1.6px);
72      width:4px;
73      border-radius:1px;
74      background:linear-gradient(to right, #555, #9d9d9d);
75    }
76
77    /* 40%: rounded capsule with vertical stripes */
78    40%, 58%{
79      left:calc(var(--i) * 4px + 18px);
80      top:7px;
81      height:34px;
82      width:4px;
83      border-radius:2px;
84      background:linear-gradient(to right, #a8a8a8, #d7d7d7);
85    }
86
87    /* 70%: left-pointing wedge */
88    70%, 84%{
89      left:calc(var(--i) * 3px + 14px);
90      top:calc(8px + (var(--i) * 0.9px));
91      height:calc(18px - var(--i) * 1.6px);
92      width:4px;
93      border-radius:1px;
94      background:linear-gradient(to right, #444, #b0b0b0);
95    }
96
97    /* back to dash */
98    100%{
99      left:calc(50% - 2px);
100      top:15px;
101      height:3px;
102      width:4px;
103      border-radius:1px;
104      background:#555;
105    }
106  }
107
108  /* subtle tonal progression across stripes */
109  .bar:nth-child(1){ --i:0; opacity:.95; }
110  .bar:nth-child(2){ --i:1; opacity:.93; }
111  .bar:nth-child(3){ --i:2; opacity:.91; }
112  .bar:nth-child(4){ --i:3; opacity:.89; }
113  .bar:nth-child(5){ --i:4; opacity:.87; }
114  .bar:nth-child(6){ --i:5; opacity:.85; }
115  .bar:nth-child(7){ --i:6; opacity:.83; }
116  .bar:nth-child(8){ --i:7; opacity:.81; }
117  .bar:nth-child(9){ --i:8; opacity:.79; }
118  .bar:nth-child(10){ --i:9; opacity:.77; }
119</style>
120</head>
121<body>
122  <div class="stage">
123    <div class="spinner" aria-hidden="true">
124      <span class="bar"></span>
125      <span class="bar"></span>
126      <span class="bar"></span>
127      <span class="bar"></span>
128      <span class="bar"></span>
129      <span class="bar"></span>
130      <span class="bar"></span>
131      <span class="bar"></span>
132      <span class="bar"></span>
133      <span class="bar"></span>
134    </div>
135  </div>
136</body>
137</html>