How to See How Much of an Article You Have Left to Read

Long articles on the web don't tell you how long they are. You start reading
a post with no idea whether it's a 3-minute piece or a 20-minute deep-dive.
About halfway through, when you're deciding whether to keep reading or
bookmark it for later, you still don't know how much is left.

This is a weird gap in the reading experience. Physical books have page
numbers. Ebook readers show percentage. Most podcast apps show time remaining.
But web articles — the most common long-form reading medium for many people
— typically give you nothing.

What the scroll bar shows (and why it's not good enough)

Chrome's scroll bar shows your position in the page — but the page includes
everything: the header, the navigation, comments, footer, related articles,
newsletter forms. A typical news article's main content might occupy 40-50%
of the total page height. When you're at 60% of the scroll bar, you might
be near the end of the article or only halfway through it, depending on
how much cruft the page has below the content.

The scroll bar is a page position indicator, not an article progress indicator.

Building your own scroll indicator

For pages you control, you can add a simple reading progress bar with a
small JavaScript scroll event listener:

const bar = document.createElement('div');
bar.style.cssText = 'position:fixed;top:0;left:0;height:3px;' +
'background:#4f46e5;z-index:9999;transition:width 0.1s;';
document.body.prepend(bar);
window.addEventListener('scroll', () => {
const pct = window.scrollY /
(document.body.scrollHeight - window.innerHeight) * 100;
bar.style.width = pct + '%';
});

This is a page-level progress bar that tracks scroll position as a
percentage of total page height — which has the same limitation as the
native scroll bar (includes all the page footer content).

Using Reading Progress Bar extension

Reading Progress Bar is a Chrome extension that adds a thin progress bar
at the top of every page — or selectively on article pages, if you configure
it that way.

The key feature beyond a basic scroll progress bar: it can detect article
content regions and calculate progress based on the article body, not the
full page height. This gives you a meaningful how far through the article
am I indicator rather than how far down the page am I.

Setting it up:

1. Install Reading Progress Bar from the Chrome Web Store
2. By default, a colored bar appears at the top of every page,
filling as you scroll
3. In settings, enable Article Mode — the extension uses heuristics
to detect the main article content area and tracks progress through
that region only
4. Customize the bar color, height, and position (top or bottom of viewport)

For long articles, the bar gives you immediate orientation: you open a
page, glance at the bar, and see it at 0%. After a minute of reading,
you glance again — maybe 20% filled. You have a calibrated sense of the
content's length without counting words or manually scrolling to the bottom.

When to use Reader View alongside the progress bar

Chrome's built-in Reader Mode creates a simplified version of an article
— removing navigation, ads, and sidebars — that gives a cleaner reading
experience. When you activate Reader Mode, the URL changes to a reader://
prefix, which is a separate URL from the original. Reading Progress Bar
treats it as a different page.

For position saving purposes, this means notes and saved positions from
the original URL don't carry over to the Reader Mode URL. If you switch
between normal and Reader Mode, you lose the saved position. Pick one
and stick with it for long documents you'll be reading over multiple sessions.

Progress bar on multi-page articles

Some publications split long articles across multiple pages (a frustrating
practice but still common on certain news sites). Each page is a separate
URL, so a reading progress bar can only track your position within the
current page, not your overall progress through the series.

For multi-page articles, the best workaround is to use the Print or
Single Page view if the site offers it (many do — look for a Print option
or a Single Page link at the top of the article). This combines all
sections into one URL, and then the progress bar works correctly across
the entire piece.

Accessibility considerations

A thin progress bar at the top of the viewport is invisible to users
with certain visual impairments. If you're building a site rather than
just using the extension, it's worth noting that a reading progress indicator
should be supplemented with accessible text — something like a hidden
screen-reader-only element that reads Article progress: 45 percent.
The Reading Progress Bar extension doesn't add ARIA attributes to the
progress bar (it's a lightweight DOM injection), so it serves sighted
users only.

Using the progress bar to decide what to skim

A progress bar changes reading behavior in a useful way: when you see
you're at 85% and have been reading for 10 minutes, you know the article
is almost done and it's worth finishing. But if you open a page and see
you're at only 10% after a few paragraphs, and the content isn't what you
expected, you can make an informed decision to skim the rest or abandon it.
The bar gives you the information to make that call before you've spent
20 minutes reaching the disappointing conclusion.