Linear Progress With Label

<!--
  The wrapper is the progressbar, not the coloured fill: aria-valuenow lives on
  the element that owns the range, and the fill is a presentational child. The
  visible "68%" and the aria-valuenow are the same number from the same source -
  they must never be allowed to drift.
-->
<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">Uploading files</span>
    <span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">68%</span>
  </div>
  <div
    role="progressbar"
    aria-valuenow="68"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Uploading files"
    class="h-2.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <div
      class="h-full rounded-full bg-blue-600 transition-[width] duration-500 ease-out motion-reduce:transition-none dark:bg-blue-500"
      style="width: 68%"
    ></div>
  </div>
</div>