layout
Token Radial Meter
Live Preview
<div class="relative w-64 h-64 flex items-center justify-center">
<svg class="w-full h-full transform -rotate-90">
<circle cx="128" cy="128" r="100" stroke="currentColor" stroke-width="12" fill="transparent"
class="text-zinc-800" />
<circle cx="128" cy="128" r="100" stroke="currentColor" stroke-width="12" fill="transparent"
stroke-dasharray="628" stroke-dashoffset="157" stroke-linecap="round"
class="text-indigo-500 drop-shadow-[0_0_8px_rgba(99,102,241,0.6)]" />
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center text-center">
<span class="text-4xl font-black text-white">75<span class="text-xl text-zinc-500">%</span></span>
<span class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] mt-2">Quota Used</span>
<div class="mt-4 px-3 py-1 bg-zinc-800 rounded-full text-[10px] text-zinc-300 font-bold">1.2M / 2.0M</div>
</div>
</div>