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

model output

Qwen3-VL-8B-Instruct

CSS3 loading animations

A 0.53T 0.19
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: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            width: 40px;
21            height: 40px;
22            position: relative;
23        }
24        .bar {
25            width: 2px;
26            height: 100%;
27            background-color: #fff;
28            position: absolute;
29            top: 0;
30            left: 0;
31            animation: pulse 1.5s infinite ease-in-out;
32        }
33        .bar:nth-child(1) {
34            animation-delay: 0s;
35        }
36        .bar:nth-child(2) {
37            animation-delay: 0.2s;
38        }
39        .bar:nth-child(3) {
40            animation-delay: 0.4s;
41        }
42        @keyframes pulse {
43            0%, 100% {
44                transform: scaleY(0.5);
45                opacity: 0.5;
46            }
47            50% {
48                transform: scaleY(1.5);
49                opacity: 1;
50            }
51        }
52    </style>
53</head>
54<body>
55    <div class="loader">
56        <div class="bar"></div>
57        <div class="bar"></div>
58        <div class="bar"></div>
59    </div>
60</body>
61</html>