← back to Loading Text (real PURE CSS)compare with ground truth →
model output
Gemini 3 Flash Preview
Loading Text (real PURE CSS)
A 0.76T 0.13
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>Loading Animation Recreation</title>
7 <style>
8 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
9
10 :root {
11 --bg-color: #0d0d0d;
12 --text-base: #222222;
13 --text-active: #ff0000;
14 --glow-color: rgba(255, 0, 0, 0.4);
15 --anim-duration: 2.8s;
16 }
17
18 body, html {
19 margin: 0;
20 padding: 0;
21 width: 100%;
22 height: 100%;
23 background-color: var(--bg-color);
24 display: flex;
25 justify-content: center;
26 align-items: center;
27 overflow: hidden;
28 font-family: 'Inter', sans-serif;
29 }
30
31 .container {
32 position: relative;
33 display: flex;
34 align-items: center;
35 justify-content: center;
36 }
37
38 /* Subtle moving spotlight behind the text */
39 .spotlight {
40 position: absolute;
41 width: 300px;
42 height: 150px;
43 background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.08) 0%, transparent 70%);
44 pointer-events: none;
45 z-index: 1;
46 filter: blur(20px);
47 animation: move-light var(--anim-duration) infinite ease-in-out;
48 }
49
50 .loader {
51 display: flex;
52 gap: 4px;
53 z-index: 2;
54 letter-spacing: 0.15em;
55 }
56
57 .letter {
58 position: relative;
59 color: var(--text-base);
60 font-size: 2rem;
61 user-select: none;
62 }
63
64 /* The animated red letters that pop up */
65 .letter::after {
66 content: attr(data-text);
67 position: absolute;
68 left: 0;
69 top: 0;
70 color: var(--text-active);
71 opacity: 0;
72 transform: translateY(0);
73 text-shadow: 0 0 15px var(--glow-color), 0 0 30px rgba(255,0,0,0.2);
74 animation: wave var(--anim-duration) infinite ease-in-out;
75 }
76
77 /* Keyframes for the "pop and glow" effect */
78 @keyframes wave {
79 0%, 40%, 100% {
80 opacity: 0;
81 transform: translateY(0) scale(1);
82 filter: blur(2px);
83 }
84 15% {
85 opacity: 1;
86 transform: translateY(-12px) scale(1.1);
87 filter: blur(0px);
88 }
89 30% {
90 opacity: 0;
91 transform: translateY(-5px) scale(1);
92 filter: blur(1px);
93 }
94 }
95
96 /* Moving the background glow */
97 @keyframes move-light {
98 0% { transform: translateX(-150px); opacity: 0.3; }
99 50% { transform: translateX(0px); opacity: 1; }
100 100% { transform: translateX(150px); opacity: 0.3; }
101 }
102
103 /* Generate staggering for each letter */
104 .letter:nth-child(1)::after { animation-delay: 0.1s; }
105 .letter:nth-child(2)::after { animation-delay: 0.2s; }
106 .letter:nth-child(3)::after { animation-delay: 0.3s; }
107 .letter:nth-child(4)::after { animation-delay: 0.4s; }
108 .letter:nth-child(5)::after { animation-delay: 0.5s; }
109 .letter:nth-child(6)::after { animation-delay: 0.6s; }
110 .letter:nth-child(7)::after { animation-delay: 0.7s; }
111 .letter:nth-child(8)::after { animation-delay: 0.8s; }
112 .letter:nth-child(9)::after { animation-delay: 0.9s; }
113 .letter:nth-child(10)::after { animation-delay: 1.0s; }
114
115 </style>
116</head>
117<body>
118
119 <div class="container">
120 <div class="spotlight"></div>
121 <div class="loader">
122 <span class="letter" data-text="L">L</span>
123 <span class="letter" data-text="O">O</span>
124 <span class="letter" data-text="A">A</span>
125 <span class="letter" data-text="D">D</span>
126 <span class="letter" data-text="I">I</span>
127 <span class="letter" data-text="N">N</span>
128 <span class="letter" data-text="G">G</span>
129 <span class="letter" data-text=".">.</span>
130 <span class="letter" data-text=".">.</span>
131 <span class="letter" data-text=".">.</span>
132 </div>
133 </div>
134
135 <script>
136 // Adjust the light source animation to roughly match the wave timing
137 const loader = document.querySelector('.loader');
138 const spotlight = document.querySelector('.spotlight');
139
140 // This script is optional for extra sync but the CSS handles most of it.
141 // We could calculate the exact bounding box if we wanted to be perfectly dynamic.
142 </script>
143</body>
144</html>