FancyUI
Saved GitHub Get started
Reading bar — box progress — preview

Reading bar — box progress

FancyUI FANCYUI

A reading bar that tracks one scrolling box, not the page.

#minimal#scroll

Open docs

Use in FancyUI

Type
Interaction
Interaction
Scroll
Style
Minimal
Code availability
Open source

Why it works

The bar tracks an element's own scroll, so it means how far into this — an article, a changelog, a panel — rather than how far down the page.

When to use it

Long content inside a scrolling container.

Things to watch

Exposed as `role="progressbar"` with `aria-valuenow`. Nested scroll containers each need their own bar.

Implementation clues

  • target element
  • scaleX from scrollTop / scrollHeight
  • position inline