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.80T 0.18
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>Loading 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            font-family: Arial, sans-serif;
16        }
17        .loading-text {
18            font-size: 48px;
19            font-weight: bold;
20            color: #333;
21            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
22            animation: pulse 1.5s infinite;
23        }
24        @keyframes pulse {
25            0%, 100% {
26                transform: scale(1);
27                opacity: 0.8;
28            }
29            50% {
30                transform: scale(1.1);
31                opacity: 1;
32            }
33        }
34    </style>
35</head>
36<body>
37    <div class="loading-text">LOADING</div>
38
39    <script>
40        // Simple animation to make the text appear gradually
41        const loadingText = document.querySelector('.loading-text');
42        setTimeout(() => {
43            loadingText.style.opacity = '1';
44        }, 300);
45    </script>
46</body>
47</html>