← back to CSS3 loading animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS3 loading animations
A 0.53T 0.19
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: 40px;
21 height: 40px;
22 position: relative;
23 }
24 .bar {
25 width: 2px;
26 height: 100%;
27 background-color: #fff;
28 position: absolute;
29 top: 0;
30 left: 0;
31 animation: pulse 1.5s infinite ease-in-out;
32 }
33 .bar:nth-child(1) {
34 animation-delay: 0s;
35 }
36 .bar:nth-child(2) {
37 animation-delay: 0.2s;
38 }
39 .bar:nth-child(3) {
40 animation-delay: 0.4s;
41 }
42 @keyframes pulse {
43 0%, 100% {
44 transform: scaleY(0.5);
45 opacity: 0.5;
46 }
47 50% {
48 transform: scaleY(1.5);
49 opacity: 1;
50 }
51 }
52 </style>
53</head>
54<body>
55 <div class="loader">
56 <div class="bar"></div>
57 <div class="bar"></div>
58 <div class="bar"></div>
59 </div>
60</body>
61</html>