animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Simple loading indicators

model output

Qwen3-VL-8B-Instruct

Simple loading indicators

A 0.66T 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>Rotating Square Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: white;
12            overflow: hidden;
13        }
14        .square {
15            position: absolute;
16            top: 20px;
17            left: 20px;
18            width: 20px;
19            height: 20px;
20            background: linear-gradient(to right, #ccc, #4caf50);
21            transform-origin: top left;
22            animation: rotateAndFlip 3s infinite ease-in-out;
23        }
24        @keyframes rotateAndFlip {
25            0% {
26                transform: rotate(0deg) scale(1);
27            }
28            25% {
29                transform: rotate(45deg) scale(1.1);
30            }
31            50% {
32                transform: rotate(90deg) scale(1);
33            }
34            75% {
35                transform: rotate(135deg) scale(0.9);
36            }
37            100% {
38                transform: rotate(180deg) scale(1);
39            }
40        }
41    </style>
42</head>
43<body>
44    <div class="square"></div>
45</body>
46</html>