Reading Time Left Indicator — Free HTML CSS JS Snippet

Static "8 min read" badges go stale the moment the reader starts scrolling. This reading-time-left indicator stays honest: a floating pill recomputes the *remaining* minutes from scroll position as you read, drains a small progress ring alongside, and swaps to a finished state when the article ends. It's the difference between a label and a companion. This snippet builds it with vanilla HTML, CSS, and JavaScript — no libraries.

Word count once, math per scroll

At load, the script counts the article's words with innerText.trim().split(/\s+/) — splitting on whitespace runs is the standard word tokenizer and costs one pass. Everything after is arithmetic: wordsLeft = total × (1 − progress) and minutes = ceil(wordsLeft / 220), using the well-established ~220 words-per-minute adult average. Math.ceil deliberately rounds up: telling a reader "1 min left" when 90 seconds remain feels like a lie; "2 min left" doesn't.

Progress is measured against the readable span

Scroll progress isn't page progress — it's −rect.top / (articleHeight − viewportHeight), the fraction of the article that has passed above the viewport, clamped to 0–1. Subtracting the viewport height matters: the article is "finished" when its *bottom* reaches the bottom of the screen, not when its top leaves — otherwise the indicator would claim minutes remaining while the reader stares at the final paragraph.

The ring drains via stroke-dashoffset

The pill's ring is an SVG circle with stroke-dasharray set to its circumference (2π × 15.5 ≈ 97.4) and its offset written per update as CIRC × (1 − progress) — the same dash mechanics as any progress ring, rotated −90° so it fills from 12 o'clock. Ring and label derive from the same progress value, so they can never disagree.

rAF-throttled, passive scrolling

The scroll handler only flips a ticking flag and queues requestAnimationFrame(update), guaranteeing at most one measurement per frame no matter how many scroll events fire, and { passive: true } tells the browser the handler never calls preventDefault, keeping scrolling unblocked. getBoundingClientRect is read once per frame — cheap at this frequency.

A finish state instead of "0 min left"

At 100% the pill fades out (is-done) and an inline "✓ Finished" note appears at the article's end. Zero-minutes states are awkward — hiding the pill and acknowledging completion inline reads as a small reward rather than a countdown hitting empty.

First paint says "min read", not "min left"

Before any scrolling, the label shows the total ("6 min read") — the familiar badge — and switches to countdown phrasing only once progress begins. One indicator serves both jobs.

The pill degrades gracefully if scroll math ever misfires

If totalWords is somehow zero (an empty article, or the DOM hasn't fully rendered before the script runs), minutes becomes 0 and the label would misleadingly read "0 min left." A defensive tweak — clamping the displayed minutes to at least 1 while progress < 1 — avoids ever showing a countdown of zero on a page the reader hasn't finished, which matters more for user trust than mathematical purity.

Customizing it

Tune WPM (180 for technical content, 260 for light prose), reposition the pill, or scope totalWords to exclude code blocks by cloning the article and stripping pre elements before counting. Related: a scroll progress bar for the classic top bar, scroll progress circle for the ring alone, reading-position table of contents, and scroll to top for the return trip.