← back to CSS Spinnerscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS Spinners
A 0.70T 0.24
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>Simple 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: #34a853;
16 overflow: hidden;
17 }
18 .circle {
19 width: 20px;
20 height: 20px;
21 border: 1px solid #fff;
22 border-radius: 50%;
23 position: absolute;
24 top: 50%;
25 left: 50%;
26 transform: translate(-50%, -50%);
27 animation: pulse 2s ease-in-out infinite alternate;
28 }
29 @keyframes pulse {
30 0% {
31 transform: translate(-50%, -50%) scale(1);
32 }
33 100% {
34 transform: translate(-50%, -50%) scale(1.2);
35 }
36 }
37</style>
38</head>
39<body>
40 <div class="circle"></div>
41</body>
42</html>