← back to CSS3 loading animationscompare with ground truth →
model output
GPT-5.4
CSS3 loading animations
A 0.82T 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" />
6<title>Red Glowing Spinner</title>
7<style>
8 :root{
9 --bg:#1b1b1b;
10 --red:#ff1200;
11 --deep:#8a0000;
12 --size:42px;
13 --halo:26px;
14 --thickness:8px;
15 --cycle:1.15s;
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 .wrap{
32 position:absolute;
33 left:50%;
34 top:6.2%;
35 transform:translateX(-50%);
36 width:90px;
37 height:90px;
38 display:grid;
39 place-items:center;
40 filter: blur(.15px);
41 }
42
43 /* soft red aura around the spinner */
44 .glow{
45 position:absolute;
46 width:var(--halo);
47 height:var(--halo);
48 border-radius:50%;
49 background:
50 radial-gradient(circle,
51 rgba(255,20,0,.42) 0%,
52 rgba(255,0,0,.28) 28%,
53 rgba(180,0,0,.16) 48%,
54 rgba(120,0,0,.08) 62%,
55 rgba(80,0,0,0) 78%);
56 transform:scale(2.2);
57 animation:pulse var(--cycle) ease-in-out infinite;
58 filter: blur(5px);
59 }
60
61 .spinner{
62 position:relative;
63 width:var(--size);
64 height:var(--size);
65 animation:spin var(--cycle) linear infinite;
66 }
67
68 /* bright broken ring */
69 .spinner::before{
70 content:"";
71 position:absolute;
72 inset:0;
73 border-radius:50%;
74 background:
75 conic-gradient(
76 from 18deg,
77 rgba(255,20,0,0) 0 42deg,
78 rgba(255,20,0,.98) 42deg 292deg,
79 rgba(255,20,0,0) 292deg 360deg
80 );
81 -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
82 mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
83 filter:
84 drop-shadow(0 0 3px rgba(255,0,0,.95))
85 drop-shadow(0 0 8px rgba(255,0,0,.45));
86 }
87
88 /* dark inner crescent / core */
89 .spinner::after{
90 content:"";
91 position:absolute;
92 left:10px;
93 top:10px;
94 width:22px;
95 height:22px;
96 border-radius:50%;
97 background:
98 radial-gradient(circle at 42% 42%,
99 #1a1a1a 0 48%,
100 #0f0f0f 49% 72%,
101 transparent 73%);
102 box-shadow:
103 -2px 1px 0 1px rgba(20,20,20,.95),
104 0 0 2px rgba(0,0,0,.8);
105 transform: rotate(18deg);
106 }
107
108 /* subtle secondary outer haze visible in darker frames */
109 .ghost{
110 position:absolute;
111 width:54px;
112 height:54px;
113 border-radius:50%;
114 background:
115 conic-gradient(
116 from 0deg,
117 rgba(120,0,0,0) 0 40deg,
118 rgba(120,0,0,.22) 40deg 300deg,
119 rgba(120,0,0,0) 300deg 360deg
120 );
121 -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
122 mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
123 filter: blur(4px);
124 animation:
125 spin calc(var(--cycle) * 1.02) linear infinite,
126 ghostPulse var(--cycle) ease-in-out infinite;
127 opacity:.55;
128 }
129
130 @keyframes spin{
131 from{ transform:rotate(0deg); }
132 to{ transform:rotate(360deg); }
133 }
134
135 /* alternating bright/dim cadence seen in the frames */
136 @keyframes pulse{
137 0%, 100%{
138 opacity:.28;
139 transform:scale(1.9);
140 }
141 22%, 28%{
142 opacity:.78;
143 transform:scale(2.45);
144 }
145 50%{
146 opacity:.22;
147 transform:scale(1.85);
148 }
149 72%, 78%{
150 opacity:.76;
151 transform:scale(2.4);
152 }
153 }
154
155 @keyframes ghostPulse{
156 0%,100%{ opacity:.22; }
157 25%{ opacity:.58; }
158 50%{ opacity:.18; }
159 75%{ opacity:.56; }
160 }
161</style>
162</head>
163<body>
164 <div class="wrap">
165 <div class="glow"></div>
166 <div class="ghost"></div>
167 <div class="spinner"></div>
168 </div>
169</body>
170</html>