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 Circular Progress Indicator</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" x-data="{ progress: 65, circumference: 2 * Math.PI * 85 }"> <div class="w-full max-w-sm bg-white p-12 rounded-[3.5rem] shadow-3xl border border-white text-center"> <div class="relative inline-flex items-center justify-center mb-10"> <!-- SVG Ring --> <svg class="h-48 w-48 -rotate-90"> <!-- Background Circle --> <circle class="text-slate-100" stroke-width="8" stroke="currentColor" fill="transparent" r="85" cx="96" cy="96" /> <!-- Progress Circle --> <circle class="text-indigo-600 transition-all duration-1000 ease-out" stroke-width="12" stroke-linecap="round" stroke="currentColor" fill="transparent" r="85" cx="96" cy="96" :stroke-dasharray="circumference" :stroke-dashoffset="circumference - (progress / 100) * circumference" /> </svg> <!-- Percentage Label --> <div class="absolute flex flex-col items-center"> <span class="text-5xl font-black text-slate-900 tracking-tighter" x-text="progress + '%'"></span> <span class="text-[10px] font-medium text-slate-400 uppercase tracking-widest mt-1 italic">Core Integrity</span> </div> </div> <div class="flex flex-col gap-5"> <div class="flex justify-between items-center text-[10px] font-bold text-slate-400 uppercase tracking-wider"> <span class="italic">Active Nodes</span> <span class="text-indigo-600 font-black">65 / 100</span> </div> <div class="h-1.5 bg-slate-50 w-full rounded-full overflow-hidden"> <div class="h-full bg-indigo-100 w-2/3"></div> </div> <button @click="progress = Math.floor(Math.random() * 90) + 10" class="mt-4 h-14 bg-slate-900 text-white rounded-2xl text-[11px] font-black uppercase tracking-widest hover:bg-indigo-600 transition shadow-xl cursor-pointer">Verify Segment</button> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
