← back to Spinners using Font Iconscompare with ground truth →
model output
GPT-5.4
Spinners using Font Icons
A 0.91T 0.21
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>Spinner Recreation</title>
7<style>
8 :root{
9 --bg:#1c1c1c;
10 --dot:#f5f5f5;
11 --size:54px;
12 --orbit:18px;
13 --count:8;
14 --dur:0.9s;
15 }
16
17 html,body{
18 margin:0;
19 width:100%;
20 height:100%;
21 background:var(--bg);
22 overflow:hidden;
23 font-family:sans-serif;
24 }
25
26 .stage{
27 position:relative;
28 width:100%;
29 height:100%;
30 background:var(--bg);
31 }
32
33 .spinner{
34 position:absolute;
35 left:50%;
36 top:54px;
37 width:var(--size);
38 height:var(--size);
39 transform:translateX(-50%);
40 filter: drop-shadow(0 0 8px rgba(255,255,255,.12));
41 }
42
43 .spinner::before{
44 content:"";
45 position:absolute;
46 inset:8px;
47 border-radius:50%;
48 background:radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,0) 72%);
49 filter:blur(2px);
50 }
51
52 .dot{
53 position:absolute;
54 left:50%;
55 top:50%;
56 width:8px;
57 height:8px;
58 margin:-4px 0 0 -4px;
59 border-radius:50%;
60 background:var(--dot);
61 transform:
62 rotate(calc(var(--i) * 45deg))
63 translateY(calc(var(--orbit) * -1));
64 animation: pulse var(--dur) linear infinite;
65 animation-delay: calc(var(--i) * -0.1125s);
66 box-shadow: 0 0 3px rgba(255,255,255,.35);
67 }
68
69 @keyframes pulse{
70 0% { width:13px; height:13px; margin:-6.5px 0 0 -6.5px; opacity:1; }
71 12.5%{ width:11px; height:11px; margin:-5.5px 0 0 -5.5px; opacity:.98; }
72 25% { width:8px; height:8px; margin:-4px 0 0 -4px; opacity:.95; }
73 37.5%{ width:6px; height:6px; margin:-3px 0 0 -3px; opacity:.92; }
74 50% { width:5px; height:5px; margin:-2.5px 0 0 -2.5px; opacity:.9; }
75 62.5%{ width:6px; height:6px; margin:-3px 0 0 -3px; opacity:.92; }
76 75% { width:8px; height:8px; margin:-4px 0 0 -4px; opacity:.95; }
77 87.5%{ width:11px; height:11px; margin:-5.5px 0 0 -5.5px; opacity:.98; }
78 100% { width:13px; height:13px; margin:-6.5px 0 0 -6.5px; opacity:1; }
79 }
80</style>
81</head>
82<body>
83 <div class="stage">
84 <div class="spinner" aria-label="loading">
85 <span class="dot" style="--i:0"></span>
86 <span class="dot" style="--i:1"></span>
87 <span class="dot" style="--i:2"></span>
88 <span class="dot" style="--i:3"></span>
89 <span class="dot" style="--i:4"></span>
90 <span class="dot" style="--i:5"></span>
91 <span class="dot" style="--i:6"></span>
92 <span class="dot" style="--i:7"></span>
93 </div>
94 </div>
95</body>
96</html>