Segmented Progress

<!--
  The row of pills is decorative; the real range still rides on the wrapper's
  aria-valuenow. The segments only round the value to the nearest notch, so the
  numeric % stays authoritative.
-->
<div class="w-full">
  <div class="mb-1.5 flex items-center justify-between gap-3">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Profile strength</span>
    <span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">70%</span>
  </div>
  <div
    role="progressbar"
    aria-valuenow="70"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Profile strength"
    class="flex w-full gap-1"
  >
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-blue-600 dark:bg-blue-500"></span>
    <span class="h-2.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-800"></span>
    <span class="h-2.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-800"></span>
    <span class="h-2.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-800"></span>
  </div>
</div>