← back to Tiny Single Element Loading Animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Tiny Single Element Loading Animations
A 0.73T 0.25
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>Circle Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: white;
12 overflow: hidden;
13 }
14 .circle {
15 position: absolute;
16 top: 20px;
17 left: 20px;
18 width: 20px;
19 height: 20px;
20 border-radius: 50%;
21 border: 1px solid #000;
22 animation: grow 1s ease-in-out forwards;
23 }
24 @keyframes grow {
25 0% {
26 width: 0;
27 height: 0;
28 }
29 100% {
30 width: 20px;
31 height: 20px;
32 }
33 }
34 </style>
35</head>
36<body>
37 <div class="circle"></div>
38
39 <script>
40 // No additional JavaScript needed for this simple animation
41 </script>
42</body>
43</html>