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

model output

Qwen3-VL-8B-Instruct

Loaders (WIP)

A 0.90T 0.20
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: #e54d42;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            font-family: Arial, sans-serif;
16        }
17        .loader {
18            display: flex;
19            flex-direction: column;
20            align-items: center;
21            color: white;
22            font-weight: bold;
23        }
24        .bar {
25            width: 100px;
26            height: 4px;
27            background-color: white;
28            margin: 5px 0;
29            animation: loading 1.5s ease-in-out infinite;
30        }
31        @keyframes loading {
32            0%, 100% {
33                transform: scaleX(0);
34                opacity: 0.5;
35            }
36            50% {
37                transform: scaleX(1);
38                opacity: 1;
39            }
40        }
41        .text {
42            margin-top: 10px;
43            font-size: 18px;
44        }
45    </style>
46</head>
47<body>
48    <div class="loader">
49        <div class="bar"></div>
50        <div class="text">LOADING ...</div>
51    </div>
52
53    <script>
54        // Optional: Add a small delay to start the animation
55        setTimeout(() => {
56            document.querySelector('.bar').style.animationPlayState = 'running';
57        }, 100);
58    </script>
59</body>
60</html>