← back to CSS3 loading animationscompare with ground truth →
model output
GPT-5.4
CSS3 loading animations
A 0.83T 0.33
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>Glowing Arc Loader</title>
7<style>
8 :root{
9 --bg:#171717;
10 --cyan:#00b7e6;
11 --cyan2:#0a8fb8;
12 --size:72px;
13 --stroke:5px;
14 --dur:2.2s;
15 }
16
17 html,body{
18 margin:0;
19 width:100%;
20 height:100%;
21 overflow:hidden;
22 background:var(--bg);
23 }
24
25 body{
26 position:relative;
27 font-family:system-ui,sans-serif;
28 }
29
30 .stage{
31 position:relative;
32 width:100%;
33 height:100%;
34 background:var(--bg);
35 }
36
37 .loader{
38 position:absolute;
39 left:50%;
40 top:34px;
41 width:var(--size);
42 height:var(--size);
43 transform:translateX(-50%);
44 filter:
45 drop-shadow(0 0 4px rgba(0,183,230,.28))
46 drop-shadow(0 0 10px rgba(0,183,230,.18))
47 drop-shadow(0 0 18px rgba(0,183,230,.10));
48 }
49
50 .loader::before{
51 content:"";
52 position:absolute;
53 inset:-10px;
54 border-radius:50%;
55 background:radial-gradient(circle, rgba(0,183,230,.12) 0%, rgba(0,183,230,.08) 22%, rgba(0,183,230,.03) 42%, rgba(0,0,0,0) 72%);
56 animation:halo var(--dur) ease-in-out infinite;
57 }
58
59 svg{
60 width:100%;
61 height:100%;
62 display:block;
63 overflow:visible;
64 }
65
66 .ring{
67 fill:none;
68 stroke-linecap:round;
69 transform-origin:50% 50%;
70 }
71
72 .arc{
73 stroke:url(#g);
74 stroke-width:var(--stroke);
75 opacity:.9;
76 }
77
78 .arc.a1{
79 stroke-dasharray:26 120;
80 stroke-dashoffset:8;
81 animation:spin1 var(--dur) cubic-bezier(.55,.08,.45,.92) infinite;
82 }
83
84 .arc.a2{
85 stroke-dasharray:18 128;
86 stroke-dashoffset:-58;
87 opacity:.78;
88 animation:spin2 var(--dur) cubic-bezier(.55,.08,.45,.92) infinite;
89 }
90
91 .arc.a3{
92 stroke-dasharray:12 134;
93 stroke-dashoffset:-98;
94 opacity:.62;
95 animation:spin3 var(--dur) cubic-bezier(.55,.08,.45,.92) infinite;
96 }
97
98 .core-hole{
99 fill:var(--bg);
100 opacity:.98;
101 }
102
103 @keyframes spin1{
104 0% { transform:rotate(8deg); opacity:.72; }
105 18% { opacity:.92; }
106 50% { transform:rotate(168deg); opacity:.88; }
107 100% { transform:rotate(368deg); opacity:.72; }
108 }
109
110 @keyframes spin2{
111 0% { transform:rotate(42deg); opacity:.52; }
112 50% { transform:rotate(222deg); opacity:.78; }
113 100% { transform:rotate(402deg); opacity:.52; }
114 }
115
116 @keyframes spin3{
117 0% { transform:rotate(78deg); opacity:.38; }
118 50% { transform:rotate(258deg); opacity:.62; }
119 100% { transform:rotate(438deg); opacity:.38; }
120 }
121
122 @keyframes halo{
123 0%,100% { transform:scale(.92); opacity:.55; }
124 50% { transform:scale(1.08); opacity:.9; }
125 }
126</style>
127</head>
128<body>
129 <div class="stage">
130 <div class="loader" aria-label="loading animation">
131 <svg viewBox="0 0 72 72" role="img" aria-hidden="true">
132 <defs>
133 <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
134 <stop offset="0%" stop-color="#0fd3ff"/>
135 <stop offset="55%" stop-color="#00b7e6"/>
136 <stop offset="100%" stop-color="#0a7ea0"/>
137 </linearGradient>
138 </defs>
139
140 <!-- three softly offset arc segments rotating together -->
141 <circle class="ring arc a3" cx="36" cy="36" r="16.5"></circle>
142 <circle class="ring arc a2" cx="36" cy="36" r="16.5"></circle>
143 <circle class="ring arc a1" cx="36" cy="36" r="16.5"></circle>
144
145 <!-- subtle center darkness visible in the reference -->
146 <circle class="core-hole" cx="36" cy="36" r="10.5"></circle>
147 </svg>
148 </div>
149 </div>
150
151 <script>
152 // Slight organic drift in brightness to mimic the soft frame-to-frame glow variation.
153 const loader = document.querySelector('.loader');
154 let t = 0;
155 function animate() {
156 t += 0.016;
157 const glow = 0.92 + Math.sin(t * 1.7) * 0.06 + Math.sin(t * 3.1) * 0.02;
158 loader.style.opacity = glow.toFixed(3);
159 requestAnimationFrame(animate);
160 }
161 requestAnimationFrame(animate);
162 </script>
163</body>
164</html>