Ring Progress

<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>

<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>