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.30
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>Circle Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: white;
12            overflow: hidden;
13        }
14        .circle {
15            width: 20px;
16            height: 20px;
17            border-radius: 50%;
18            position: absolute;
19            top: 10px;
20            left: 10px;
21            background: linear-gradient(to bottom, #4caf50, #81c784);
22            animation: pulse 2s ease-in-out infinite;
23        }
24        @keyframes pulse {
25            0%, 100% {
26                transform: scale(1);
27                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5);
28            }
29            50% {
30                transform: scale(1.2);
31                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
32            }
33        }
34    </style>
35</head>
36<body>
37    <div class="circle"></div>
38</body>
39</html>