← back to flat loading animatecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
flat loading animate
A 0.76T 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>Expanding Circle 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-color: white;
15 }
16 .circle {
17 width: 50px;
18 height: 50px;
19 border-radius: 50%;
20 background: radial-gradient(circle, #ff5e5e 0%, #ff8a8a 100%);
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 animation: expand 1s ease-out forwards;
25 }
26 .inner-circle {
27 width: 20px;
28 height: 20px;
29 border-radius: 50%;
30 background: radial-gradient(circle, #ff5e5e 0%, #ff8a8a 100%);
31 }
32 @keyframes expand {
33 0% {
34 transform: scale(0.5);
35 }
36 100% {
37 transform: scale(1.5);
38 }
39 }
40</style>
41</head>
42<body>
43 <div class="circle">
44 <div class="inner-circle"></div>
45 </div>
46</body>
47</html>