← back to CSS3 loading animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS3 loading animations
A 0.78T 0.31
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: #000;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .loader {
17 display: flex;
18 justify-content: center;
19 align-items: center;
20 width: 80px;
21 height: 80px;
22 }
23 .loader div {
24 width: 4px;
25 height: 40px;
26 background-color: #fff;
27 margin: 0 2px;
28 border-radius: 2px;
29 animation: pulse 1.5s ease-in-out infinite;
30 }
31 .loader div:nth-child(1) {
32 animation-delay: 0s;
33 }
34 .loader div:nth-child(2) {
35 animation-delay: 0.1s;
36 }
37 .loader div:nth-child(3) {
38 animation-delay: 0.2s;
39 }
40 .loader div:nth-child(4) {
41 animation-delay: 0.3s;
42 }
43 .loader div:nth-child(5) {
44 animation-delay: 0.4s;
45 }
46 @keyframes pulse {
47 0%, 100% {
48 opacity: 0.5;
49 transform: scale(1);
50 }
51 50% {
52 opacity: 1;
53 transform: scale(1.2);
54 }
55 }
56 </style>
57</head>
58<body>
59 <div class="loader">
60 <div></div>
61 <div></div>
62 <div></div>
63 <div></div>
64 <div></div>
65 </div>
66</body>
67</html>