Circular progress

<div class="relative size-40"> <svg class="size-full" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"> <!-- Background Circle --> <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-neutral-300 dark:text-neutral-700" stroke-width="2"></circle> <!-- Progress Circle inside a group with rotation --> <g class="origin-center -rotate-90 transform"> <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-600 dark:text-blue-500" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="75"></circle> </g> </svg> <!-- Percentage Text --> <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"> <span class="text-center text-2xl font-bold text-gray-800 dark:text-white">72%</span> </div> </div>