← back to Neon Loaderscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Neon Loaders
A 0.67T 0.18
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>Neon Pulse Animation</title>
7<style>
8 body {
9 margin: 0;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 background: radial-gradient(circle, #121212 0%, #000 100%);
15 overflow: hidden;
16 }
17
18 .pulse-container {
19 width: 120px;
20 height: 30px;
21 position: relative;
22 animation: pulse 2s ease-in-out infinite alternate;
23 }
24
25 .pulse-bar {
26 position: absolute;
27 top: 0;
28 left: 0;
29 width: 100%;
30 height: 100%;
31 background: linear-gradient(to right, #ff00ff, #00ffff);
32 border-radius: 15px;
33 opacity: 0.7;
34 animation: move 2s ease-in-out infinite alternate;
35 }
36
37 @keyframes pulse {
38 0% {
39 transform: scale(0.8);
40 }
41 100% {
42 transform: scale(1.2);
43 }
44 }
45
46 @keyframes move {
47 0% {
48 background: linear-gradient(to right, #ff00ff, #00ffff);
49 transform: translateX(-10px);
50 }
51 50% {
52 background: linear-gradient(to right, #00ffff, #ff00ff);
53 transform: translateX(10px);
54 }
55 100% {
56 background: linear-gradient(to right, #ff00ff, #00ffff);
57 transform: translateX(-10px);
58 }
59 }
60</style>
61</head>
62<body>
63 <div class="pulse-container">
64 <div class="pulse-bar"></div>
65 </div>
66</body>
67</html>