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>

Related components

More items from the merged UI library.

View all