← back to CSS3 loading animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS3 loading animations
A 0.67T 0.26
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 background-color: black;
10 margin: 0;
11 padding: 0;
12 overflow: hidden;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 height: 100vh;
17 }
18 .dots {
19 display: flex;
20 justify-content: center;
21 align-items: center;
22 position: absolute;
23 top: 10px;
24 left: 50%;
25 transform: translateX(-50%);
26 }
27 .dot {
28 width: 10px;
29 height: 10px;
30 background-color: #4CAF50;
31 border-radius: 50%;
32 margin: 0 2px;
33 animation: pulse 1.5s infinite;
34 }
35 @keyframes pulse {
36 0%, 100% {
37 transform: scale(1);
38 opacity: 1;
39 }
40 50% {
41 transform: scale(1.2);
42 opacity: 0.5;
43 }
44 }
45 </style>
46</head>
47<body>
48 <div class="dots">
49 <div class="dot"></div>
50 <div class="dot"></div>
51 <div class="dot"></div>
52 <div class="dot"></div>
53 <div class="dot"></div>
54 </div>
55
56 <script>
57 // No JavaScript needed for this animation
58 </script>
59</body>
60</html>