Reading Progress

A slim progress bar that tracks how far into the article the reader is, with an optional back-to-top button.

Copied 0 times.

↑

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a reading progress indicator for my article pages. Match my existing design system, colors, and fonts.

STRUCTURE
- Include both elements: the progress bar on top and the back-to-top button bottom-right. They share the scroll measurement code.
- Progress bar (when included): a 3-4px bar fixed to the very top of the viewport (above or attached to my sticky header), filling left to right in my accent color as the reader advances.
- Back-to-top button (when included): a small round button (44x44px minimum, up-arrow icon) fixed to the bottom-right corner with safe-area padding.

MEASUREMENT
- Progress measures the ARTICLE body, not the whole document: 0% when the article's top reaches the viewport, 100% when its bottom enters. Compute from the article element's bounding box; a config constant holds the article selector with a clearly marked TODO to point it at my content wrapper.
- Update via requestAnimationFrame on scroll (passive listener), throttled so the handler does no layout work more than once per frame.

BEHAVIOR
- The back-to-top button stays hidden until the reader has scrolled past roughly one viewport height, then fades in (150ms); clicking it smooth-scrolls to the top (instant with prefers-reduced-motion) and moves focus to the page's main heading so keyboard users are not stranded.
- On pages without the configured article element, neither element renders.
- Neither element ever causes layout shift: the bar overlays at the top edge, the button floats.

QUALITY
- The bar uses role="progressbar" with aria-valuenow updated at most once per second (screen readers do not need per-pixel updates); the button is a real button with aria-label="Back to top".
- WCAG AA contrast for the bar against the header background and for the button in both states; visible focus ring on the button.

Members only

What it does

Reading progress is the thin colored line along the top of the screen that fills as the reader moves through your article. It answers the quiet question every reader has, how much is left, without them ever asking. Readers who can feel the end coming keep going.

Tracks your actual article, not the whole page; comments and footers don't count.
Zero when the story starts, full exactly when the last line arrives.
The optional back-to-top button stays hidden until about a full screen of scrolling, then fades in and offers the ride home in one tap.
Clicking the button glides up and leaves keyboard readers at the headline.
Pages without an article show neither, automatically.
Nothing ever nudges your layout; the bar overlays the top edge and the button floats above the corner.

How it works

1Choose your set: the bar plus the back-to-top button, just the bar, or just the button.
2Copy the prompt, a small build plan your AI follows, into whichever AI you use.
3Point the marked spot at your article's container, so the bar measures the story and nothing else.
4Scroll a long article to test that the bar fills smoothly and reaches full exactly as the ending comes into view, never before.
5Tap the back-to-top button after a good scroll: it should glide you up and leave you at the headline.
6Check a page with no article, like your homepage: the bar and button should both stay away.

What you can customize

Which elements: both is the full reading kit; bar only stays entirely out of the way; button only suits short pages that still run tall on phones.
Color, thickness, and the button's look adapt to your site automatically, because your AI builds both right inside your own design.

You'll also like

Video Lightbox Popup

A thumbnail with a play button that opens the video in a centered overlay. No autoplay anywhere.

How was your experience today?

😠🙁😐🙂😍

Micro Survey Popup

A one-question feedback widget with an emoji scale. Two taps to answer, zero friction, real data to your backend.

Click it. Preview simulates the request.

Loading State Button

A submit button with honest built-in states: idle, loading spinner, then success or error, tied to the real request.