← back to flat loading animatecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
flat loading animate
A 0.36T 0.00
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>Two Circles 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 .container {
17 position: relative;
18 width: 100px;
19 height: 100px;
20 }
21 .circle {
22 position: absolute;
23 width: 30px;
24 height: 30px;
25 border-radius: 50%;
26 transition: transform 0.5s ease-in-out;
27 }
28 .circle-red {
29 background: #ff6b6b;
30 left: 20px;
31 top: 20px;
32 }
33 .circle-blue {
34 background: #2980b9;
35 left: 40px;
36 top: 20px;
37 }
38 .circle-red:hover {
39 transform: scale(1.2) rotate(180deg);
40 }
41 .circle-blue:hover {
42 transform: scale(1.2) rotate(180deg);
43 }
44</style>
45</head>
46<body>
47 <div class="container">
48 <div class="circle circle-red"></div>
49 <div class="circle circle-blue"></div>
50 </div>
51</body>
52</html>