← back to Simple loading indicatorscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Simple loading indicators
A 0.66T 0.29
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>Rotating Square Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: white;
12 overflow: hidden;
13 }
14 .square {
15 position: absolute;
16 top: 20px;
17 left: 20px;
18 width: 20px;
19 height: 20px;
20 background: linear-gradient(to right, #ccc, #4caf50);
21 transform-origin: top left;
22 animation: rotateAndFlip 3s infinite ease-in-out;
23 }
24 @keyframes rotateAndFlip {
25 0% {
26 transform: rotate(0deg) scale(1);
27 }
28 25% {
29 transform: rotate(45deg) scale(1.1);
30 }
31 50% {
32 transform: rotate(90deg) scale(1);
33 }
34 75% {
35 transform: rotate(135deg) scale(0.9);
36 }
37 100% {
38 transform: rotate(180deg) scale(1);
39 }
40 }
41 </style>
42</head>
43<body>
44 <div class="square"></div>
45</body>
46</html>