Skip to content
Aback UI

Feedback

Reading Progress

A decorative bar that fills as the reader moves through an article.

BetaUsed in Aback Tools, Aback LaunchRegistry JSON (opens in a new tab)

Scroll this page. The bar at the very top of the window tracks the paragraph block below; it starts filling when the block reaches the top and is full when its end is in view.

Paragraph 1. Long-form pages in Aback Tools and Aback Launch use this bar on guides and blog posts. It is decorative and hidden from assistive technology, because the scroll position is already available to everyone.

Paragraph 2. Long-form pages in Aback Tools and Aback Launch use this bar on guides and blog posts. It is decorative and hidden from assistive technology, because the scroll position is already available to everyone.

Paragraph 3. Long-form pages in Aback Tools and Aback Launch use this bar on guides and blog posts. It is decorative and hidden from assistive technology, because the scroll position is already available to everyone.

Paragraph 4. Long-form pages in Aback Tools and Aback Launch use this bar on guides and blog posts. It is decorative and hidden from assistive technology, because the scroll position is already available to everyone.

Paragraph 5. Long-form pages in Aback Tools and Aback Launch use this bar on guides and blog posts. It is decorative and hidden from assistive technology, because the scroll position is already available to everyone.

Paragraph 6. Long-form pages in Aback Tools and Aback Launch use this bar on guides and blog posts. It is decorative and hidden from assistive technology, because the scroll position is already available to everyone.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add reading-progress

Writes components/ui/reading-progress.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import { ReadingProgress } from "@/components/ui/reading-progress";

API reference

Props and composition points for Reading Progress. Native element props pass through.

PropTypeDefaultDescription
targetRefObject<HTMLElement | null>NoneThe element being read, such as the article. Without it, progress follows the whole document.
classNamestringNoneMove or restyle the bar, such as below a fixed header with top-16.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • The bar is decorative and aria-hidden. Scroll position is already available to everyone.
  • It never intercepts pointer events and is hidden when printing.
  • Updates run once per animation frame and write a transform directly, so scrolling never re-renders the page.
  • It sits at z-index 100, the top of the documented stack, so it is not covered by sticky headers.

Used in production

The Aback products whose interfaces shaped this component.

Related