animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loaders (WIP)

model output

LLaMA 4 Scout

Loaders (WIP)

A 0.74T 0.26
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: #ff3737;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            padding: 0;
16        }
17        .loader {
18            position: relative;
19        }
20        .dot {
21            position: absolute;
22            top: 50%;
23            left: 50%;
24            transform: translate(-50%, -50%);
25            width: 10px;
26            height: 10px;
27            border-radius: 50%;
28            background-color: white;
29            opacity: 1;
30        }
31        .dot:nth-child(1) {
32            animation: fadeOut 0.5s ease-out 0s forwards;
33        }
34        .dot:nth-child(2) {
35            animation: fadeOut 0.5s ease-out 0.5s forwards;
36        }
37        .dot:nth-child(3) {
38            animation: fadeOut 0.5s ease-out 1s forwards;
39        }
40        @keyframes fadeOut {
41            0% {
42                opacity: 1;
43                transform: translate(-50%, -50%) scale(1);
44            }
45            100% {
46                opacity: 0;
47                transform: translate(-50%, -50%) scale(0.5);
48            }
49        }
50        .loader:after {
51            content: "";
52            position: absolute;
53            top: 50%;
54            left: 50%;
55            transform: translate(-50%, -50%);
56            width: 10px;
57            height: 10px;
58            border-radius: 50%;
59            background-color: white;
60            animation: appear 1s ease-out 1.5s forwards;
61        }
62        @keyframes appear {
63            0% {
64                opacity: 0;
65                transform: translate(-50%, -50%) scale(0.5);
66            }
67            100% {
68                opacity: 1;
69                transform: translate(-50%, -50%) scale(1);
70            }
71        }
72    </style>
73</head>
74<body>
75    <div class="loader">
76        <div class="dot"></div>
77        <div class="dot"></div>
78        <div class="dot"></div>
79    </div>
80</body>
81</html>