Reading Progress Bar

A reading progress bar is the thin colored line at the very top of the page that fills from left to right as the reader scrolls — a quiet signal of how much article is left. This version builds its own bar, measures scroll position against page height, and uses your theme’s accent color automatically. Nothing in it depends on theme markup, so it works on every Ghost theme.

The Code

Paste into Settings → Code injection → Site footer:

<script>
(function() {
  var bar = document.createElement('div');
  bar.id = 'reading-progress';
  bar.style.cssText =
    'position:fixed;top:0;left:0;height:3px;width:0;' +
    'background:var(--ghost-accent-color,#3b82f6);' +
    'z-index:9999;transition:width 80ms ease-out;';
  document.body.appendChild(bar);

  function update() {
    var doc = document.documentElement;
    var total = doc.scrollHeight - window.innerHeight;
    var progress = total > 0 ? (window.scrollY / total) * 100 : 0;
    bar.style.width = Math.min(100, Math.max(0, progress)) + '%';
  }

  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update, { passive: true });
  update();
})();
</script>

How to Install

1. Ghost Admin → Settings → Code injection
2. Paste into Site footer, save
3. Open any post and scroll — the bar fills along the top edge

Only show it on posts

Sitewide, the bar also runs on your homepage and archive pages, where it means little. To limit it to posts, wrap the script in Ghost’s body-class check — Ghost adds post-template to the body on post pages:

if (!document.body.classList.contains('post-template')) return;

Add that line as the first line inside (function() {.

How It Works

The script creates a fixed 3-pixel bar pinned to the top of the viewport. On every scroll event it divides how far you’ve scrolled by how far you can scroll, and sets the bar’s width to that percentage. The passive: true listener flag keeps scrolling smooth. The color comes from --ghost-accent-color, a CSS variable Ghost sets from your Design & branding → Accent color setting — so the bar matches your brand without any configuration.

Customization

Thickness: change height:3px (2–4px is typical). Color: replace var(--ghost-accent-color,#3b82f6) with any CSS color. Bottom of screen instead: swap top:0 for bottom:0.

Works With

Every Ghost theme. Some Luxe themes (for example Shiro) include a reading progress bar as a built-in setting — if you use one, toggle it in the theme settings instead of injecting code.