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.80T 0.24
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        }
16        .dot-container {
17            position: relative;
18        }
19        .dot {
20            position: absolute;
21            top: 50%;
22            left: 50%;
23            transform: translate(-50%, -50%);
24            width: 10px;
25            height: 10px;
26            border-radius: 50%;
27            background-color: white;
28        }
29        .dot:nth-child(1) {
30            animation: pulse 1.5s infinite;
31        }
32        .dot:nth-child(2) {
33            animation: pulse 1.5s 0.2s infinite;
34        }
35        .dot:nth-child(3) {
36            animation: pulse 1.5s 0.4s infinite;
37        }
38        @keyframes pulse {
39            0% {
40                opacity: 1;
41                transform: scale(1);
42            }
43            50% {
44                opacity: 0.5;
45                transform: scale(0.5);
46            }
47            100% {
48                opacity: 1;
49                transform: scale(1);
50            }
51        }
52    </style>
53</head>
54<body>
55    <div class="dot-container">
56        <div class="dot"></div>
57        <div class="dot"></div>
58        <div class="dot"></div>
59    </div>
60</body>
61</html>