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.67T 0.23
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        .dashed-line {
17            width: 20px;
18            height: 2px;
19            background-color: #333;
20            border-radius: 1px;
21            position: relative;
22            animation: dashAnimation 1s ease-in-out forwards;
23        }
24        @keyframes dashAnimation {
25            0% {
26                transform: rotate(0deg);
27                width: 20px;
28                height: 2px;
29            }
30            100% {
31                transform: rotate(180deg);
32                width: 20px;
33                height: 2px;
34            }
35        }
36    </style>
37</head>
38<body>
39    <div class="dashed-line"></div>
40</body>
41</html>