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.38T 0.36
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        .loader {
17            width: 80px;
18            height: 80px;
19            position: relative;
20        }
21        .loader::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            animation: pulse 1.5s ease-in-out infinite;
30            border-radius: 50%;
31            z-index: 1;
32        }
33        .loader::after {
34            content: "";
35            position: absolute;
36            top: 0;
37            left: 0;
38            width: 100%;
39            height: 100%;
40            background: linear-gradient(90deg, #333, #666);
41            animation: pulse 1.5s ease-in-out infinite;
42            border-radius: 50%;
43            z-index: 2;
44            opacity: 0.5;
45        }
46        @keyframes pulse {
47            0% {
48                transform: scale(0.8);
49                opacity: 0.5;
50            }
51            50% {
52                transform: scale(1.2);
53                opacity: 1;
54            }
55            100% {
56                transform: scale(0.8);
57                opacity: 0.5;
58            }
59        }
60    </style>
61</head>
62<body>
63    <div class="loader"></div>
64</body>
65</html>