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 Gradient Progress Bar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-900 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ progress: 45 }"> <div class="w-full max-w-md bg-white/5 backdrop-blur-3xl p-10 rounded-[3rem] border border-white/10 shadow-3xl"> <div class="mb-10 text-center"> <div class="flex items-center justify-center gap-3 mb-3"> <div class="h-1.5 w-1.5 bg-rose-500 rounded-full animate-pulse shadow-[0_0_10px_rgba(244,63,94,0.8)]"></div> <h3 class="text-sm font-black text-white tracking-[0.1em] uppercase">Neural Handshake</h3> </div> <p class="text-[11px] text-slate-400 font-medium tracking-widest uppercase">Spectral Logic Integration</p> </div> <!-- Gradient Progress --> <div class="h-6 bg-black/40 rounded-full p-1 border border-white/5"> <div class="h-full bg-linear-to-r from-indigo-500 via-rose-500 to-amber-500 rounded-full transition-all duration-1000 relative overflow-hidden" :style="'width: ' + progress + '%'" > <!-- Animated Shine --> <div class="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div> </div> </div> <div class="mt-8 flex justify-between items-center px-4"> <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest italic">Region Alpha</span> <span class="text-xl font-black text-white tracking-tighter" x-text="progress + '%'"></span> </div> <div class="mt-12"> <button @click="progress = progress < 100 ? progress + 15 : 0" class="w-full py-4 bg-white/5 text-slate-400 text-xs font-bold uppercase tracking-[0.2em] rounded-2xl hover:bg-white/10 hover:text-white transition-all border border-white/5 cursor-pointer">Inject Stream</button> </div> </div> <style> @keyframes shimmer { 100% { transform: translateX(100%); } } </style> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
