Progress Circle Data

<div class="relative w-48 h-48 group">
        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
            <circle class="text-slate-100 stroke-current" stroke-width="6" fill="transparent" r="40" cx="50" cy="50">
            </circle>
            <circle class="text-indigo-600 stroke-current transition-all duration-1000 ease-out" stroke-width="8"
                stroke-dasharray="251.2" stroke-dashoffset="62.8" stroke-linecap="round" fill="transparent" r="40"
                cx="50" cy="50"></circle>
        </svg>
        <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-4xl font-black text-slate-900 leading-none">75%</span>
            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-2">Complete</span>
        </div>
        <div
            class="absolute -top-4 -right-4 bg-indigo-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg shadow-indigo-200 group-hover:scale-110 transition-transform cursor-pointer">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>
    </div>