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.55T 0.28
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: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            display: flex;
18            gap: 2px;
19        }
20        .loader div {
21            width: 10px;
22            height: 10px;
23            background-color: #34C759;
24            border-radius: 50%;
25            animation: loading 1.5s infinite;
26        }
27        .loader div:nth-child(1) {
28            animation-delay: 0s;
29        }
30        .loader div:nth-child(2) {
31            animation-delay: 0.2s;
32        }
33        .loader div:nth-child(3) {
34            animation-delay: 0.4s;
35        }
36        .loader div:nth-child(4) {
37            animation-delay: 0.6s;
38        }
39        .loader div:nth-child(5) {
40            animation-delay: 0.8s;
41        }
42        @keyframes loading {
43            0% {
44                transform: scale(1);
45            }
46            50% {
47                transform: scale(1.5);
48            }
49            100% {
50                transform: scale(1);
51            }
52        }
53    </style>
54</head>
55<body>
56    <div class="loader">
57        <div></div>
58        <div></div>
59        <div></div>
60        <div></div>
61        <div></div>
62    </div>
63</body>
64</html>