← back to CSS Spinnerscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS Spinners
A 0.75T 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>Circle Animation</title>
7<style>
8 body {
9 margin: 0;
10 padding: 0;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 background: #4a23a9;
16 color: white;
17 font-family: Arial, sans-serif;
18 }
19 .container {
20 display: flex;
21 flex-direction: column;
22 align-items: center;
23 justify-content: center;
24 height: 100%;
25 width: 100%;
26 }
27 .circle {
28 width: 50px;
29 height: 50px;
30 border: 2px solid white;
31 border-radius: 50%;
32 animation: pulse 2s ease-in-out infinite alternate;
33 margin-top: 100px;
34 }
35 @keyframes pulse {
36 0% {
37 transform: scale(1);
38 }
39 100% {
40 transform: scale(1.2);
41 }
42 }
43</style>
44</head>
45<body>
46 <div class="container">
47 <div class="circle"></div>
48 </div>
49</body>
50</html>