← back to flat loading animatecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
flat loading animate
A 0.66T 0.32
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 .dot {
17 width: 20px;
18 height: 20px;
19 background: radial-gradient(circle, #ff6b6b, #ff9a9e);
20 border-radius: 50%;
21 position: relative;
22 animation: pulse 1.5s ease-in-out infinite alternate;
23 }
24 .dot:nth-child(2) {
25 animation-delay: 0.3s;
26 }
27 @keyframes pulse {
28 0% {
29 transform: scale(1) translateY(0);
30 opacity: 1;
31 }
32 100% {
33 transform: scale(1.2) translateY(-10px);
34 opacity: 0.7;
35 }
36 }
37</style>
38</head>
39<body>
40 <div class="dot"></div>
41 <div class="dot"></div>
42</body>
43</html>