← back to Simple Spinnercompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Simple Spinner
A 0.66T 0.25
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 Circle Animation</title>
7<style>
8 body {
9 background-color: #4a2f7a;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .circle {
17 width: 50px;
18 height: 50px;
19 border: 2px solid #4a2f7a;
20 border-radius: 50%;
21 position: relative;
22 animation: rotate 2s linear infinite;
23 }
24 .dot {
25 width: 10px;
26 height: 10px;
27 border-radius: 50%;
28 position: absolute;
29 top: 50%;
30 left: 50%;
31 transform: translate(-50%, -50%);
32 background-color: #4a2f7a;
33 }
34 .dot:nth-child(1) {
35 animation: colorChange 2s linear infinite;
36 background-color: #4a2f7a;
37 }
38 .dot:nth-child(2) {
39 animation: colorChange 2s linear infinite 0.5s;
40 background-color: #4a2f7a;
41 }
42 @keyframes rotate {
43 0% { transform: rotate(0deg); }
44 100% { transform: rotate(360deg); }
45 }
46 @keyframes colorChange {
47 0%, 100% { background-color: #4a2f7a; }
48 25% { background-color: #4a2f7a; }
49 50% { background-color: #ff6b6b; }
50 75% { background-color: #4a2f7a; }
51 }
52</style>
53</head>
54<body>
55 <div class="circle">
56 <div class="dot"></div>
57 <div class="dot"></div>
58 </div>
59</body>
60</html>