← back to Tiny Single Element Loading Animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Tiny Single Element Loading Animations
A 0.66T 0.30
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 margin: 0;
10 padding: 0;
11 background-color: #fff;
12 overflow: hidden;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 height: 100vh;
17 }
18 .line {
19 position: absolute;
20 top: 10px;
21 left: 10px;
22 width: 2px;
23 height: 20px;
24 background-color: #000;
25 transform-origin: center;
26 animation: pulse 1.5s ease-in-out infinite alternate;
27 }
28 @keyframes pulse {
29 0% {
30 transform: scale(1) rotate(0deg);
31 }
32 100% {
33 transform: scale(1.2) rotate(180deg);
34 }
35 }
36 </style>
37</head>
38<body>
39 <div class="line"></div>
40
41 <script>
42 // No JavaScript needed for this simple animation
43 </script>
44</body>
45</html>