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.81T 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        }
16        .loading-bar {
17            position: relative;
18            width: 100px;
19            height: 10px;
20            background-color: rgba(255, 255, 255, 0.5);
21        }
22        .loading-bar::before {
23            content: "";
24            position: absolute;
25            top: 0;
26            left: 0;
27            width: 0;
28            height: 100%;
29            background-color: white;
30            animation: loading 5s linear infinite;
31        }
32        .loading-text {
33            position: absolute;
34            top: -20px;
35            left: 50%;
36            transform: translateX(-50%);
37            font-size: 14px;
38            color: white;
39        }
40        @keyframes loading {
41            0% {
42                width: 0;
43            }
44            100% {
45                width: 100%;
46            }
47        }
48    </style>
49</head>
50<body>
51    <div class="loading-bar">
52        <span class="loading-text">LOADING ...</span>
53    </div>
54</body>
55</html>