← back to Single Element Spinnercompare with ground truth →
model output
Claude Sonnet 4.6
Single Element Spinner
A 0.92T 0.28
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>Spinning Arc</title>
7<style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 background: #0a0a0a;
16 width: 100vw;
17 height: 100vh;
18 overflow: hidden;
19 }
20
21 .spinner-container {
22 position: absolute;
23 left: 210px;
24 top: 105px;
25 }
26
27 .spinner {
28 width: 30px;
29 height: 30px;
30 border: 2px solid transparent;
31 border-top-color: #00aacc;
32 border-right-color: #00aacc;
33 border-radius: 50%;
34 animation: spin 1s linear infinite;
35 }
36
37 @keyframes spin {
38 0% {
39 transform: rotate(0deg);
40 }
41 100% {
42 transform: rotate(360deg);
43 }
44 }
45</style>
46</head>
47<body>
48 <div class="spinner-container">
49 <div class="spinner"></div>
50 </div>
51</body>
52</html>