animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Wavy Loading Animations

model output

LLaMA 4 Scout

Wavy Loading Animations

A 0.57T 0.17
compare with ground truth →
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>