← back to Single Element Spinnercompare with ground truth →
model output
GPT-5.4
Single Element Spinner
A 0.92T 0.34
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>Minimal Cyan Spinner</title>
7<style>
8 :root{
9 --bg:#111;
10 --cyan:#00b7ff;
11 --size:38px;
12 --stroke:3px;
13 --x:193px;
14 --y:101px;
15 --dur:1.05s;
16 }
17
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:var(--bg);
24 }
25
26 body{
27 position:relative;
28 font-family:sans-serif;
29 }
30
31 .spinner{
32 position:absolute;
33 left:var(--x);
34 top:var(--y);
35 width:var(--size);
36 height:var(--size);
37 transform-origin:50% 50%;
38 animation: spin var(--dur) linear infinite;
39 filter: drop-shadow(0 0 1px rgba(0,183,255,.25));
40 }
41
42 .spinner::before{
43 content:"";
44 position:absolute;
45 inset:0;
46 border-radius:50%;
47 box-sizing:border-box;
48 border:var(--stroke) solid transparent;
49 border-top-color:var(--cyan);
50 border-right-color:var(--cyan);
51 border-bottom-color:var(--cyan);
52 transform:rotate(-18deg);
53 }
54
55 /* subtle unevenness to mimic the frame sequence */
56 .spinner::after{
57 content:"";
58 position:absolute;
59 inset:4px;
60 border-radius:50%;
61 box-sizing:border-box;
62 border:1px solid transparent;
63 border-top-color:rgba(0,183,255,.18);
64 transform:rotate(22deg);
65 }
66
67 @keyframes spin{
68 from{ transform:rotate(0deg); }
69 to{ transform:rotate(360deg); }
70 }
71</style>
72</head>
73<body>
74 <div class="spinner" aria-hidden="true"></div>
75</body>
76</html>