Route progress

<div style="position:relative;height:3rem;background:var(--p234-color-paper-sunk);border-radius:var(--p234-radius-sm);overflow:hidden">
  <div class="p234-progress" style="position:absolute;transform:scaleX(0.7)"></div>
  <p style="font-family:var(--p234-type-caption-family);font-size:var(--p234-type-caption-size);color:var(--p234-color-ink-subtle);margin:0;padding:var(--p234-space-5)">The bar sits at the very top of the viewport in use. Shown inside a box here.</p>
</div>

How it should behave

• Appear only after a short delay, around 150ms. A fast navigation should show nothing at all; a flash of bar makes a quick site feel busy.
• Advance quickly to about 70 per cent, then slow down. It cannot know the real progress, and pretending otherwise is worse than easing.
• Finish to 100 per cent and fade out when the new page commits.

• Do not use it for in-page loading. A section fetching its own data shows a skeleton in its own space.
• Do not put it above a toast. A message about what happened outranks a bar about what is happening.

Reduced motion

With prefers-reduced-motion the bar still appears and still fills, it just stops sliding. Removing the indicator entirely would take away the only signal that a tap registered, which is the opposite of the accommodation.

Why keep it

Most readers are on a phone, often on a slow connection. Without this, a tap that is working looks like a tap that did nothing, and the reader taps again.