← back to Tiny Single Element Loading Animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Tiny Single Element Loading Animations
A 0.71T 0.21
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: white;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 overflow: hidden;
17 }
18 .spinner {
19 width: 20px;
20 height: 20px;
21 border: 2px solid #e0e0e0;
22 border-top: 2px solid #ccc;
23 border-radius: 50%;
24 animation: spin 1s linear infinite;
25 transform: translateZ(0);
26 }
27 @keyframes spin {
28 0% {
29 transform: rotate(0deg);
30 }
31 100% {
32 transform: rotate(360deg);
33 }
34 }
35 </style>
36</head>
37<body>
38 <div class="spinner"></div>
39
40 <script>
41 // No JavaScript needed for this simple animation
42 </script>
43</body>
44</html>