animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to CSS3 loading animations

model output

LLaMA 4 Scout

CSS3 loading animations

A 0.69T 0.21
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>Loading Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            height: 100vh;
21        }
22        .bar {
23            width: 10px;
24            height: 40px;
25            background-color: #fff;
26            margin: 0 5px;
27            animation: pulse 1.5s infinite;
28        }
29        @keyframes pulse {
30            0% {
31                height: 40px;
32            }
33            50% {
34                height: 60px;
35            }
36            100% {
37                height: 40px;
38            }
39        }
40    </style>
41</head>
42<body>
43    <div class="loader">
44        <div class="bar"></div>
45        <div class="bar"></div>
46        <div class="bar"></div>
47    </div>
48</body>
49</html>