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 Spinner</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex items-center justify-center min-h-screen p-6 antialiased"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10 w-full max-w-2xl bg-white p-16 rounded-[4rem] shadow-3xl border border-white"> <!-- Spinner 1: Modern Ring --> <div class="flex flex-col items-center gap-6 group"> <div class="relative h-16 w-16"> <div class="absolute inset-0 rounded-full border-4 border-slate-100"></div> <div class="absolute inset-0 rounded-full border-t-4 border-indigo-600 animate-spin shadow-[0_0_15px_rgba(79,70,229,0.3)]"></div> </div> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-indigo-600 transition-colors">Handshake Init</span> </div> <!-- Spinner 2: Pulsing Core --> <div class="flex flex-col items-center gap-6 group"> <div class="relative flex items-center justify-center h-16 w-16"> <div class="absolute h-full w-full bg-rose-500/20 rounded-full animate-ping"></div> <div class="relative h-6 w-6 bg-rose-600 rounded-lg rotate-45 animate-pulse"></div> </div> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-rose-600 transition-colors">Risk Scanning</span> </div> <!-- Spinner 3: Geometric Blocks --> <div class="flex flex-col items-center gap-6 group"> <div class="flex gap-1.5 h-16 items-center"> <div class="w-1.5 h-8 bg-indigo-600 rounded-full animate-[loading_1s_ease-in-out_infinite]"></div> <div class="w-1.5 h-12 bg-indigo-500 rounded-full animate-[loading_1s_ease-in-out_0.2s_infinite]"></div> <div class="w-1.5 h-16 bg-indigo-400 rounded-full animate-[loading_1s_ease-in-out_0.4s_infinite]"></div> <div class="w-1.5 h-12 bg-indigo-300 rounded-full animate-[loading_1s_ease-in-out_0.6s_infinite]"></div> <div class="w-1.5 h-8 bg-indigo-200 rounded-full animate-[loading_1s_ease-in-out_0.8s_infinite]"></div> </div> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-indigo-400 transition-colors">Mesh Balancing</span> </div> <!-- Spinner 4: Orbiting Dots --> <div class="flex flex-col items-center gap-6 group"> <div class="relative h-16 w-16 animate-spin"> <div class="absolute top-0 left-1/2 -translate-x-1/2 h-3 w-3 bg-amber-500 rounded-full"></div> <div class="absolute bottom-0 left-1/2 -translate-x-1/2 h-3 w-3 bg-amber-200 rounded-full"></div> <div class="absolute left-0 top-1/2 -translate-y-1/2 h-3 w-3 bg-amber-400 rounded-full"></div> <div class="absolute right-0 top-1/2 -translate-y-1/2 h-3 w-3 bg-amber-300 rounded-full"></div> </div> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-amber-500 transition-colors">Temporal Sync</span> </div> </div> <style> @keyframes loading { 0%, 100% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } } </style> </body> </html>
