Thin Indeterminate Progress

<!--
  This is the one bar with NO aria-valuenow - and that is correct. In ARIA an
  absent value on role="progressbar" is exactly how you announce "in progress,
  duration unknown"; adding a number here would be a lie. motion-reduce swaps the
  sliding chip for a static one so the state stays visible without any movement.
-->
<style>
  @keyframes progress-indeterminate {
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
  }
</style>

<div class="w-full">
  <div
    role="progressbar"
    aria-label="Loading"
    aria-busy="true"
    class="relative h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <div class="absolute inset-y-0 left-0 w-2/5 rounded-full bg-blue-600 animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:hidden dark:bg-blue-500"></div>
    <div class="absolute inset-y-0 left-0 hidden w-1/3 rounded-full bg-blue-600 motion-reduce:block dark:bg-blue-500" aria-hidden="true"></div>
  </div>
  <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Loading…</p>
</div>