← back to Wavy Loading Animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Wavy Loading Animations
A 0.42T 0.27
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: #f5f5f5;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .logo {
17 width: 60px;
18 height: 60px;
19 background: linear-gradient(to right, #333, #666);
20 display: flex;
21 justify-content: center;
22 align-items: center;
23 animation: pulse 1.5s ease-in-out infinite alternate;
24 }
25 .logo::before {
26 content: "";
27 width: 0;
28 height: 0;
29 border-left: 10px solid transparent;
30 border-right: 10px solid transparent;
31 border-top: 20px solid #fff;
32 position: absolute;
33 top: 50%;
34 left: 50%;
35 transform: translate(-50%, -50%);
36 }
37 .logo::after {
38 content: "";
39 width: 0;
40 height: 0;
41 border-left: 10px solid transparent;
42 border-right: 10px solid transparent;
43 border-top: 20px solid #fff;
44 position: absolute;
45 top: 50%;
46 left: 50%;
47 transform: translate(-50%, -50%);
48 animation: pulse 1.5s ease-in-out infinite alternate;
49 }
50 @keyframes pulse {
51 0% {
52 transform: translate(-50%, -50%) scale(0.8);
53 }
54 100% {
55 transform: translate(-50%, -50%) scale(1.2);
56 }
57 }
58</style>
59</head>
60<body>
61 <div class="logo"></div>
62</body>
63</html>