How to Add a Progress Bar to Any Website You Visit

Most reading progress indicators are either site-specific (built into a
particular CMS like Medium or Substack) or require custom CSS on pages
you control. Adding one universally to every site you visit requires a
browser-level solution.

Here are the options from simplest to most featured.

Method 1: Inject JavaScript via a userscript

Tampermonkey (a popular userscript manager for Chrome) lets you run
custom JavaScript on any page. You can write a script that injects a
progress bar. The pattern involves creating a fixed-position div, appending
it to the body, then updating its width on each scroll event.

This works but uses page-height scroll position, so it's not content-aware.

Method 2: Reading Progress Bar extension

For a zero-configuration setup, Reading Progress Bar is the fastest path:

1. Install from the Chrome Web Store
2. Done — a progress bar appears on every page you visit

Default behavior: thin bar at the top of the viewport, fills from left
to right as you scroll, color from your Chrome theme accent. No setup
needed beyond installation.

Customizing the bar

If the defaults aren't right for your setup, the extension settings offer:

Color: Any CSS color — hex, RGB, or named color. High-contrast colors
like #ef4444 (red) are visible at a glance. Softer colors like #94a3b8
(slate blue) are less intrusive. Some people match their browser accent color.

Height: Default 3px is subtle. 5-6px is more visible for people who
want to actually notice it without looking closely. 8-10px is prominent
but starts to feel like decoration.

Position: Top is most common (most people expect it there — that's where
YouTube's progress bar lives, where Medium's is, etc.). Bottom can work
well if you find a top bar distracting while reading.

Site exclusions: You probably don't want a progress bar on web apps
(Gmail, Notion, Figma) that have scrollable interfaces but aren't reading
content. In settings, add common web app domains to the exclusion list.
Reading Progress Bar also has a smart mode that only shows the bar on
pages it determines are article or reading content.

Animation: The transition between positions can be animated (smooth
crawl) or instant (jumps to position). Smooth looks better but adds
a very small amount of visual overhead. For very long pages where scroll
events fire rapidly, instant mode is more accurate.

For sites that already have their own progress bars (Medium, some news
sites), the extension will show a second bar above the site's native one.
You can exclude those domains to avoid the redundancy.

Global vs. smart activation mode

Reading Progress Bar can run in two activation modes. Global mode shows
the bar on every page you visit, including app pages, admin dashboards,
and blank pages. Smart mode (the recommended default for most users)
analyzes each page and only activates the bar when it detects an article
or reading content based on text density and semantic structure.

Smart mode reduces visual noise on non-reading pages. The minor trade-off
is an occasional wrong detection (the bar showing on a page that isn't
really an article, or not showing on an unusual article layout). If you
want complete control, Global mode plus a manual exclusion list gives
you the predictability of knowing exactly when the bar appears.

For non-article content

On pages that aren't articles — search results, social feeds, dashboards —
a reading progress bar doesn't make semantic sense, but it still functions
as a scroll position indicator. Some people find this useful as a subtle
reminder of how far they've scrolled on long feeds (Reddit, Twitter/X,
Hacker News) and use it to set a mental limit: when the bar hits 50%, stop
scrolling and do something more productive.

This is an entirely subjective use, but several people have mentioned it
as a useful nudge against infinite scroll habits.

Combining with Reading Mode

Chrome's built-in Reader Mode (access via the icon in the address bar on
compatible pages) strips navigation, ads, and decorative content from
articles and renders them in a clean typographic layout. When combined
with Reading Progress Bar in Article Mode, you get both a clean reading
experience and an accurate progress indicator — because Reader Mode
creates a simplified DOM where the article content is essentially the
entire page, the progress bar's content-area detection becomes trivial.

Not all pages support Chrome Reader Mode — it only activates on pages
Chrome identifies as article content. But for the pages it does work on,
the combination of Reader Mode and Reading Progress Bar is the closest
browser-based equivalent to a dedicated reading app like Instapaper.

Reading progress as a focus tool

The progress bar has an underappreciated use as a focus indicator. When
you catch yourself distracted mid-article, glancing at the bar shows
how far you've actually gotten. If you've been on the page for five
minutes but the bar is only at 15%, you've been distracted — probably
by other tabs. The bar creates a concrete, visual accountability signal
that's more immediate than checking a clock or word count.