← back to Wavy Loading Animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Wavy Loading Animations
A 0.53T 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>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 .triangle {
17 width: 0;
18 height: 0;
19 border-left: 10px solid transparent;
20 border-right: 10px solid transparent;
21 border-bottom: 20px solid #888;
22 animation: expand 1s ease-in-out forwards;
23 transform-origin: center bottom;
24 }
25 @keyframes expand {
26 0% {
27 width: 0;
28 height: 0;
29 border-bottom: 20px solid #888;
30 }
31 100% {
32 width: 0;
33 height: 0;
34 border-bottom: 20px solid #888;
35 transform: rotate(180deg);
36 }
37 }
38</style>
39</head>
40<body>
41 <div class="triangle"></div>
42</body>
43</html>