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