← back to CSS3 loading animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS3 loading animations
A 0.66T 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>Rotating Circle Animation</title>
7<style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: black;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 }
17 .circle {
18 width: 50px;
19 height: 50px;
20 border: 2px solid #00ff99;
21 border-radius: 50%;
22 position: relative;
23 animation: rotate 2s linear infinite;
24 }
25 .circle::before {
26 content: "";
27 position: absolute;
28 top: 50%;
29 left: 50%;
30 transform: translate(-50%, -50%);
31 width: 20px;
32 height: 20px;
33 background-color: #00ff99;
34 border-radius: 50%;
35 animation: pulse 1.5s ease-in-out infinite alternate;
36 }
37 @keyframes rotate {
38 0% { transform: rotate(0deg); }
39 100% { transform: rotate(360deg); }
40 }
41 @keyframes pulse {
42 0% { transform: scale(1); }
43 100% { transform: scale(1.2); }
44 }
45</style>
46</head>
47<body>
48 <div class="circle"></div>
49</body>
50</html>