Reading Progress Bar

A thin fixed bar across the top of the page that fills as the reader moves through an article, giving a constant sense of how much is left. Driven entirely by IntersectionObserver thresholds rather than a scroll handler, so there’s no layout thrashing on long pages.

Long-form · Astro · Subscription · commercial licence · v1.0.1 · updated 2026-10-15 · Live demo

Install

velocityx add reading-progress

Subscription component. Run velocityx login with your key first — get one.

---
import ReadingProgress from '../components/velocity/reading-progress/ReadingProgress.astro';
---
<ReadingProgress />

Props

Prop	Type	Default	Description
target	string	required	id of the element the progress should track (your article container).
label	string	'Reading progress'	Visually hidden label for the bar, for screen reader users.

Files written

velocityx drops these into your project:

• components/velocity/reading-progress/ReadingProgress.astro

Peer dependencies

None.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

Commercial, for the duration of an active Velocity X subscription. The source is served by the licence-gated endpoint, never by the public CDN.