← back to Wavy Loading Animationscompare with ground truth →
model output
LLaMA 4 Scout
Wavy Loading Animations
A 0.57T 0.17
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>Animation</title>
7 <style>
8 .bar {
9 position: relative;
10 top: 50%;
11 left: 50%;
12 transform: translate(-50%, -50%);
13 width: 50px;
14 height: 20px;
15 background: #000;
16 clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
17 animation: grow 2s ease-out infinite;
18 }
19
20 @keyframes grow {
21 0% {
22 transform: translate(-50%, -50%) scaleX(0.1);
23 opacity: 1;
24 }
25 100% {
26 transform: translate(-50%, -50%) scaleX(1);
27 opacity: 0;
28 }
29 }
30
31 .bars {
32 position: relative;
33 top: 50%;
34 left: 50%;
35 transform: translate(-50%, -50%);
36 }
37
38 .bar-strip {
39 position: absolute;
40 width: 2px;
41 height: 10px;
42 background: #000;
43 animation: grow-strip 2s ease-out infinite;
44 }
45
46 @keyframes grow-strip {
47 0% {
48 height: 0px;
49 top: 10px;
50 }
51 100% {
52 height: 100px;
53 top: -90px;
54 }
55 }
56 </style>
57</head>
58<body>
59 <div class="bars">
60 <div class="bar-strip" style="left: 2px; animation-delay: 0.1s;"></div>
61 <div class="bar-strip" style="left: 6px; animation-delay: 0.2s;"></div>
62 <div class="bar-strip" style="left: 10px; animation-delay: 0.3s;"></div>
63 <div class="bar-strip" style="left: 14px; animation-delay: 0.4s;"></div>
64 <div class="bar-strip" style="left: 18px; animation-delay: 0.5s;"></div>
65 </div>
66</body>
67</html>