<div class="flex justify-center p-6">
<svg class="size-16 shrink-0 text-indigo-500" viewBox="0 0 36 36">
<path
stroke="rgb(226 232 240)"
stroke-width="3"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
stroke="currentColor"
stroke-width="3"
stroke-dasharray="50, 100"
stroke-linecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
</div>
<div class="flex justify-center p-6">
<div class="relative inline-block">
<svg class="size-16 shrink-0 text-indigo-500" viewBox="0 0 36 36">
<path
stroke="rgb(226 232 240)"
stroke-width="3"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
stroke="currentColor"
stroke-width="3"
stroke-dasharray="50, 100"
stroke-linecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-center text-sm font-medium text-gray-900">50%</div>
</div>
</div>
Modify `stroke-dasharray` attribute to change the percentage.
<div class="flex justify-center space-x-2 p-6">
<div class="relative inline-flex">
<svg class="size-16 shrink-0 text-green-500" viewBox="0 0 36 36">
<path
stroke="rgb(226 232 240)"
stroke-width="3"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
stroke="currentColor"
stroke-width="3"
stroke-dasharray="25, 100"
stroke-linecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-center text-sm font-medium text-gray-900">25%</div>
</div>
<div class="relative inline-flex">
<svg class="size-16 shrink-0 text-orange-500" viewBox="0 0 36 36">
<path
stroke="rgb(226 232 240)"
stroke-width="3"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
stroke="currentColor"
stroke-width="3"
stroke-dasharray="75, 100"
stroke-linecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-center text-sm font-medium text-gray-900">75%</div>
</div>
<div class="relative inline-flex">
<svg class="size-16 shrink-0 text-blue-500" viewBox="0 0 36 36">
<path
stroke="rgb(226 232 240)"
stroke-width="3"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
stroke="currentColor"
stroke-width="3"
stroke-dasharray="88, 100"
stroke-linecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-center text-sm font-medium text-gray-900">88%</div>
</div>
</div>