Reading Progress Bar

This snippet adds a thin bar to the top of the screen that fills up as the visitor scrolls, so readers see how far they are through a long page.

Installation instructions

Step 1: Install the snippet in Super

1. Open your site in the Super Dashboard
2. Open the ‘Code’ page
3. In the ‘Body’ tab, paste the following snippet:
Copy

<script src="https://sites.super.so/snippets/v2/reading-progress.js"></script>

4. Click Save

Step 2: Customize it (optional)

To change the look, paste this above the snippet in the ‘Body’ tab and edit the values:

<script>
  window.superReadingProgress = {
    color: "linear-gradient(90deg, #335DA8, #FAB624)",
    height: "3px",
    hideOnHomepage: true
  };
</script>

• color – any CSS color or gradient (default: dark gray)
• height – thickness of the bar (default: 3px)
• hideOnHomepage – true hides the bar on the home page, false shows it everywhere (default: true)

The bar also works when visitors move between pages without a full reload, and it is ignored by screen readers.