← back to flat loading animatecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
flat loading animate
A 0.69T 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 @keyframes pulse {
9 0%, 100% { transform: scale(1); }
10 50% { transform: scale(1.1); }
11 }
12
13 @keyframes colorChange {
14 0% { background: #ffaa55; }
15 25% { background: #00a896; }
16 50% { background: #ff5555; }
17 75% { background: #00a896; }
18 100% { background: #ffaa55; }
19 }
20
21 .circle {
22 width: 50px;
23 height: 50px;
24 border-radius: 50%;
25 background: #ffaa55;
26 position: absolute;
27 top: 50%;
28 left: 50%;
29 transform: translate(-50%, -50%);
30 animation: pulse 1s ease-in-out, colorChange 4s ease-in-out 0s infinite alternate;
31 }
32</style>
33</head>
34<body>
35 <div class="circle"></div>
36</body>
37</html>