animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Neon Loaders

model output

Qwen3-VL-8B-Instruct

Neon Loaders

A 0.78T 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>Loading Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background: radial-gradient(circle, #121212 0%, #0a0a0a 100%);
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18
19  .loader {
20    display: flex;
21    justify-content: center;
22    align-items: center;
23    width: 200px;
24    height: 60px;
25    background: rgba(0, 0, 0, 0.5);
26    border: 2px solid #00f;
27    border-radius: 8px;
28    color: #00f;
29    font: bold 18px sans-serif;
30    text-align: center;
31    padding: 10px;
32    box-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f;
33    animation: pulse 2s infinite alternate;
34  }
35
36  @keyframes pulse {
37    0% {
38      box-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f;
39      border-color: #00f;
40    }
41    50% {
42      box-shadow: 0 0 20px #00f, 0 0 40px #00f, 0 0 60px #00f, 0 0 80px #00f;
43      border-color: #00f;
44    }
45    100% {
46      box-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f;
47      border-color: #00f;
48    }
49  }
50
51  .loader::before {
52    content: "LOADING";
53    animation: glow 2s infinite alternate;
54  }
55
56  @keyframes glow {
57    0% {
58      color: #00f;
59    }
60    50% {
61      color: #f00;
62    }
63    100% {
64      color: #00f;
65    }
66  }
67</style>
68</head>
69<body>
70  <div class="loader">LOADING</div>
71</body>
72</html>