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

model output

Qwen3-VL-8B-Instruct

Wavy Loading Animations

A 0.40T 0.15
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            background-color: #f5f5f5;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .spinner {
17            width: 40px;
18            height: 40px;
19            position: relative;
20        }
21        .spinner::before {
22            content: "";
23            position: absolute;
24            top: 0;
25            left: 0;
26            width: 100%;
27            height: 100%;
28            background: linear-gradient(90deg, #333, #666);
29            border-radius: 50%;
30            animation: spin 1.5s linear infinite;
31        }
32        .spinner::after {
33            content: "";
34            position: absolute;
35            top: 0;
36            left: 0;
37            width: 100%;
38            height: 100%;
39            background: linear-gradient(90deg, #333, #666);
40            border-radius: 50%;
41            animation: spin 1.5s linear infinite;
42            animation-delay: -0.5s;
43        }
44        @keyframes spin {
45            0% {
46                transform: rotate(0deg);
47            }
48            100% {
49                transform: rotate(360deg);
50            }
51        }
52    </style>
53</head>
54<body>
55    <div class="spinner"></div>
56</body>
57</html>