Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Loading Page</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-900 flex justify-center items-center min-h-screen p-6 antialiased"> <div class="max-w-md w-full flex flex-col items-center space-y-16"> <!-- Atmospheric Loading Motif --> <div class="relative flex items-center justify-center"> <!-- Orbiting Rings --> <div class="absolute h-64 w-64 border-2 border-indigo-500/10 rounded-full animate-[spin_8s_linear_infinite]"></div> <div class="absolute h-48 w-48 border border-white/5 rounded-full animate-[spin_12s_linear_infinite_reverse]"></div> <!-- Core Pulse --> <div class="relative h-24 w-24 bg-indigo-600 rounded-[2rem] flex items-center justify-center shadow-[0_0_64px_-8px_rgba(79,70,229,0.8)] animate-pulse"> <svg class="h-10 w-10 text-white animate-[spin_3s_linear_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor font-light"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v1m6 1l1 1m-1 11l1 1m-11-1l-1 1m1-11l-1-1m11 1h1m-11 0h-1m5 11v1m0-11v11" /></svg> </div> <!-- Floating Particles --> <div class="absolute top-0 right-0 h-2 w-2 bg-indigo-400 rounded-full animate-ping"></div> <div class="absolute bottom-10 left-0 h-1.5 w-1.5 bg-indigo-200/50 rounded-full animate-ping [animation-delay:1s]"></div> </div> <div class="text-center space-y-4"> <h2 class="text-2xl font-black text-white tracking-[0.2em] uppercase">Initialising Sync</h2> <div class="flex items-center justify-center gap-1"> <div class="h-1 w-1 bg-indigo-500 rounded-full animate-bounce [animation-delay:-0.3s]"></div> <div class="h-1 w-1 bg-indigo-500 rounded-full animate-bounce [animation-delay:-0.15s]"></div> <div class="h-1 w-1 bg-indigo-500 rounded-full animate-bounce"></div> </div> <p class="text-[9px] font-black text-slate-500 uppercase tracking-[0.5em] pt-8">Handshaking with Apex Node US-East-01</p> </div> <!-- Progress Meta --> <div class="w-full flex justify-between px-10"> <div class="text-left space-y-1"> <p class="text-[8px] font-black text-slate-600 uppercase tracking-widest">Spectral Level</p> <p class="text-[10px] font-bold text-indigo-400 font-mono">0.42.1-v4</p> </div> <div class="text-right space-y-1"> <p class="text-[8px] font-black text-slate-600 uppercase tracking-widest">Authority</p> <p class="text-[10px] font-bold text-indigo-400 font-mono">VANGUARD_HUB</p> </div> </div> </div> </body> </html>
