← back to Loading Text (real PURE CSS)compare with ground truth →
model output
GPT-5.4
Loading Text (real PURE CSS)
A 0.68T 0.14
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>Loading Animation Replica</title>
7<style>
8 :root{
9 --bg:#111;
10 --dim:#2a2a2d;
11 --red:#b30000;
12 --shadow:#000;
13 --dur:2.8s;
14 --letters:10;
15 }
16
17 html,body{
18 margin:0;
19 height:100%;
20 background:var(--bg);
21 overflow:hidden;
22 font-family: Arial, Helvetica, sans-serif;
23 }
24
25 body{
26 display:grid;
27 place-items:center;
28 }
29
30 .stage{
31 position:relative;
32 width:min(72vw,760px);
33 height:min(18vw,180px);
34 display:grid;
35 place-items:center;
36 isolation:isolate;
37 }
38
39 .word{
40 position:relative;
41 display:flex;
42 align-items:flex-end;
43 gap:.06em;
44 font-size:clamp(34px,6vw,86px);
45 font-weight:500;
46 letter-spacing:.12em;
47 text-transform:uppercase;
48 color:var(--dim);
49 line-height:1;
50 filter: blur(.15px);
51 }
52
53 .char{
54 position:relative;
55 display:inline-block;
56 color:var(--dim);
57 animation:
58 pulse var(--dur) linear infinite,
59 dots var(--dur) linear infinite;
60 animation-delay: calc(var(--i) * (var(--dur) / var(--letters)));
61 will-change: transform, color, text-shadow, opacity;
62 }
63
64 .char::after{
65 content: attr(data-c);
66 position:absolute;
67 left:0;
68 top:100%;
69 transform: scaleY(-1) translateY(-0.08em);
70 transform-origin: top center;
71 color: rgba(0,0,0,.82);
72 opacity:.95;
73 filter: blur(1.2px);
74 pointer-events:none;
75 }
76
77 .char::before{
78 content:"";
79 position:absolute;
80 left:50%;
81 top:55%;
82 width:1.35em;
83 height:1.35em;
84 transform:translate(-50%,-50%) scale(0);
85 border-radius:50%;
86 background:
87 radial-gradient(circle, rgba(179,0,0,.22) 0%, rgba(179,0,0,.12) 28%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 72%);
88 filter: blur(10px);
89 opacity:0;
90 z-index:-1;
91 animation: glow var(--dur) linear infinite;
92 animation-delay: calc(var(--i) * (var(--dur) / var(--letters)));
93 }
94
95 @keyframes pulse{
96 0%{
97 color:var(--dim);
98 transform:translateY(0) scale(1);
99 text-shadow:none;
100 opacity:.95;
101 }
102 8%{
103 color:var(--red);
104 transform:translateY(-0.18em) scale(1.55);
105 text-shadow:
106 0 0 8px rgba(179,0,0,.18),
107 0 0 18px rgba(179,0,0,.08);
108 opacity:1;
109 }
110 18%{
111 color:var(--red);
112 transform:translateY(-0.08em) scale(1.18);
113 text-shadow:
114 0 0 6px rgba(179,0,0,.12);
115 }
116 30%{
117 color:#1a1a1a;
118 transform:translateY(0) scale(1);
119 text-shadow:none;
120 opacity:.9;
121 }
122 100%{
123 color:var(--dim);
124 transform:translateY(0) scale(1);
125 text-shadow:none;
126 opacity:.95;
127 }
128 }
129
130 @keyframes glow{
131 0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
132 8%{ opacity:1; transform:translate(-50%,-50%) scale(1.9); }
133 18%{ opacity:.55; transform:translate(-50%,-50%) scale(2.5); }
134 30%,100%{ opacity:0; transform:translate(-50%,-50%) scale(3.2); }
135 }
136
137 /* dots stay smaller but still pulse */
138 .dot{
139 letter-spacing:0;
140 }
141
142 @keyframes dots{
143 0%,100%{ }
144 }
145
146 /* subtle vignette like the frames */
147 .stage::before{
148 content:"";
149 position:absolute;
150 inset:-30vmax;
151 background:
152 radial-gradient(circle at center, rgba(255,255,255,0.015) 0 10%, rgba(0,0,0,0) 22%),
153 radial-gradient(circle at center, rgba(0,0,0,0) 0 35%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.34) 100%);
154 pointer-events:none;
155 z-index:-2;
156 }
157</style>
158</head>
159<body>
160 <div class="stage">
161 <div class="word" aria-label="LOADING...">
162 <span class="char" style="--i:0" data-c="L">L</span>
163 <span class="char" style="--i:1" data-c="O">O</span>
164 <span class="char" style="--i:2" data-c="A">A</span>
165 <span class="char" style="--i:3" data-c="D">D</span>
166 <span class="char" style="--i:4" data-c="I">I</span>
167 <span class="char" style="--i:5" data-c="N">N</span>
168 <span class="char" style="--i:6" data-c="G">G</span>
169 <span class="char dot" style="--i:7" data-c=".">.</span>
170 <span class="char dot" style="--i:8" data-c=".">.</span>
171 <span class="char dot" style="--i:9" data-c=".">.</span>
172 </div>
173 </div>
174</body>
175</html>