animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Tiny Single Element Loading Animations

model output

Qwen3-VL-8B-Instruct

Tiny Single Element Loading Animations

A 0.78T 0.29
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>Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: white;
12            overflow: hidden;
13        }
14        .dot {
15            position: absolute;
16            width: 5px;
17            height: 5px;
18            background-color: black;
19            border-radius: 50%;
20            animation: pulse 1.5s infinite;
21        }
22        .dot:nth-child(1) {
23            left: 10px;
24            top: 10px;
25            animation-delay: 0s;
26        }
27        .dot:nth-child(2) {
28            left: 30px;
29            top: 10px;
30            animation-delay: 0.2s;
31        }
32        .dot:nth-child(3) {
33            left: 50px;
34            top: 10px;
35            animation-delay: 0.4s;
36        }
37        @keyframes pulse {
38            0%, 100% {
39                transform: scale(1);
40                opacity: 1;
41            }
42            50% {
43                transform: scale(1.2);
44                opacity: 0.5;
45            }
46        }
47    </style>
48</head>
49<body>
50    <div class="dot"></div>
51    <div class="dot"></div>
52    <div class="dot"></div>
53</body>
54</html>