← back to Wavy Loading Animationscompare with ground truth →
model output
GPT-5.4
Wavy Loading Animations
A 0.78T 0.23
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>Frame Sequence Recreation</title>
7<style>
8 :root{
9 --bg:#f3f3f3;
10 --dark:#4a4a4a;
11 --mid:#8f8f8f;
12 --light:#bdbdbd;
13 --dur:1.8s;
14 }
15
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 overflow:hidden;
21 background:var(--bg);
22 font-family:sans-serif;
23 }
24
25 .stage{
26 position:relative;
27 width:100vw;
28 height:100vh;
29 background:var(--bg);
30 }
31
32 .spinner{
33 position:absolute;
34 left:50%;
35 top:9.5%;
36 width:84px;
37 height:34px;
38 transform:translateX(-50%);
39 }
40
41 .mode{
42 position:absolute;
43 inset:0;
44 display:flex;
45 align-items:center;
46 justify-content:center;
47 gap:2px;
48 opacity:0;
49 animation-duration:var(--dur);
50 animation-iteration-count:infinite;
51 animation-timing-function:linear;
52 }
53
54 /* 1: horizontal dashes */
55 .line{
56 animation-name:showLine;
57 }
58 .line span{
59 width:6px;
60 height:2px;
61 background:var(--dark);
62 border-radius:1px;
63 display:block;
64 }
65
66 /* 2: compact vertical bars + tiny nub */
67 .compact{
68 animation-name:showCompact;
69 gap:1px;
70 }
71 .compact .bar{
72 width:4px;
73 height:34px;
74 background:var(--light);
75 border-radius:1px;
76 transform-origin:center bottom;
77 }
78 .compact .bar:nth-child(1){height:33px}
79 .compact .bar:nth-child(2){height:34px}
80 .compact .bar:nth-child(3){height:34px}
81 .compact .bar:nth-child(4){height:34px}
82 .compact .bar:nth-child(5){height:34px}
83 .compact .bar:nth-child(6){height:33px}
84 .compact .bar:nth-child(7){height:31px}
85 .compact .bar:nth-child(8){height:28px}
86 .compact .nub{
87 width:10px;
88 height:3px;
89 background:var(--dark);
90 margin-left:-1px;
91 border-radius:1px;
92 position:relative;
93 }
94 .compact .nub::after{
95 content:"";
96 position:absolute;
97 right:-2px;
98 top:50%;
99 width:3px;
100 height:3px;
101 background:var(--dark);
102 border-radius:50%;
103 transform:translateY(-50%);
104 }
105
106 /* 3: wedge of bars */
107 .wedge{
108 animation-name:showWedge;
109 gap:2px;
110 }
111 .wedge .seg{
112 width:4px;
113 background:linear-gradient(to bottom, #8a8a8a, #b8b8b8);
114 border-radius:1px;
115 transform-origin:center bottom;
116 }
117 .wedge .seg:nth-child(1){height:10px;background:#5a5a5a}
118 .wedge .seg:nth-child(2){height:12px;background:#666}
119 .wedge .seg:nth-child(3){height:14px;background:#727272}
120 .wedge .seg:nth-child(4){height:17px;background:#7d7d7d}
121 .wedge .seg:nth-child(5){height:20px;background:#888}
122 .wedge .seg:nth-child(6){height:23px;background:#949494}
123 .wedge .seg:nth-child(7){height:26px;background:#9f9f9f}
124 .wedge .seg:nth-child(8){height:29px;background:#ababab}
125 .wedge .seg:nth-child(9){height:33px;background:#b7b7b7}
126
127 /* 4: stretched taper line */
128 .taper{
129 animation-name:showTaper;
130 gap:2px;
131 }
132 .taper .dash{
133 height:2px;
134 background:var(--dark);
135 border-radius:1px;
136 display:block;
137 }
138 .taper .dash:nth-child(1){width:6px}
139 .taper .dash:nth-child(2){width:6px}
140 .taper .dash:nth-child(3){width:6px}
141 .taper .dash:nth-child(4){width:6px}
142 .taper .dash:nth-child(5){width:6px}
143 .taper .dash:nth-child(6){width:5px}
144 .taper .dash:nth-child(7){width:4px}
145 .taper .dash:nth-child(8){width:4px}
146 .taper .dash:nth-child(9){width:3px}
147 .taper .dash:nth-child(10){width:3px}
148 .taper .dash:nth-child(11){width:2px}
149
150 @keyframes showLine{
151 0%,24%{opacity:1}
152 25%,100%{opacity:0}
153 }
154 @keyframes showCompact{
155 0%,24%{opacity:0}
156 25%,49%{opacity:1}
157 50%,100%{opacity:0}
158 }
159 @keyframes showWedge{
160 0%,49%{opacity:0}
161 50%,74%{opacity:1}
162 75%,100%{opacity:0}
163 }
164 @keyframes showTaper{
165 0%,74%{opacity:0}
166 75%,100%{opacity:1}
167 }
168
169 /* subtle pulse to mimic slight frame-to-frame redraw feel */
170 .spinner{
171 animation:micro var(--dur) infinite linear;
172 }
173 @keyframes micro{
174 0%,24%{transform:translateX(-50%) scaleX(1)}
175 25%,49%{transform:translateX(-50%) scaleX(1.01)}
176 50%,74%{transform:translateX(-50%) scaleX(1)}
177 75%,100%{transform:translateX(-50%) scaleX(.99)}
178 }
179</style>
180</head>
181<body>
182 <div class="stage">
183 <div class="spinner" aria-hidden="true">
184 <div class="mode line">
185 <span></span><span></span><span></span><span></span><span></span>
186 <span></span><span></span><span></span><span></span><span></span>
187 </div>
188
189 <div class="mode compact">
190 <span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span>
191 <span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span>
192 <span class="nub"></span>
193 </div>
194
195 <div class="mode wedge">
196 <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
197 <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
198 <span class="seg"></span>
199 </div>
200
201 <div class="mode taper">
202 <span class="dash"></span><span class="dash"></span><span class="dash"></span><span class="dash"></span>
203 <span class="dash"></span><span class="dash"></span><span class="dash"></span><span class="dash"></span>
204 <span class="dash"></span><span class="dash"></span><span class="dash"></span>
205 </div>
206 </div>
207 </div>
208</body>
209</html>