Reading Time & Progress Bar Generator

📚 Reading Time & Progress Bar Generator

Blog Slug (one per line, e.g. /blog):
Words Per Minute:
Max Time for Progress Gradient (in minutes):
Generate Code

Is This Free to Use?

Personal use is free forever.
If you’re using this tool on your own blog, portfolio, or personal Squarespace site, you don’t need to pay — enjoy it freely.

Commercial use requires a one-time license.
If you’re a developer, agency, or using this on a client project or monetized site, please purchase a commercial license. It helps support ongoing development and gives you peace of mind.

One-time cost: £49.99 (normally £79.99)
Covers unlimited client sites, all current tools, and future updates.

👉 Learn more or buy a license here

Add a Reading Time & Progress Bar to Your Squarespace Blog Posts

Long-form blog posts can be intimidating for readers. Adding a simple reading time estimate and a progress bar at the top of the article gives visitors useful context and makes your content more approachable.

This small enhancement shows:

• 🕒 An estimated reading time based on your content length

• 📊 A visual progress bar with color that adjusts to the post length

It’s a subtle way to reduce bounce rate, keep readers engaged, and give your blog a more interactive feel.

What This Tool Does

This tool generates a snippet of JavaScript that you paste into the Page Footer of your Squarespace post. When the page loads:

• It scans all the text on the page

• Calculates a rough word count

• Estimates reading time using the WPM (words per minute) setting

• Adds a styled progress bar beneath your post title

• The bar fills and changes color depending on the estimated time

You can control:

• The reading speed assumption (default: 250 words/minute)

• The “max time” used to calculate the progress bar color

• Which blog posts the feature appears on (using slugs, explained below)

What Is a Blog Slug?

A slug is the part of your URL that comes after the domain name.

For example, if your post is located at:
https://yourdomain.com/blog/my-awesome-post

The slug is /blog.

The script uses these slugs to decide which pages should display the progress bar, so it doesn’t interfere with your homepage or non-article content. You can enter multiple slugs — one per line — in the tool.

Common examples:

/blog

/articles

/insights

So, for this blog www.simplyputpsych.co.uk/Behind-the-Blog it would be /Behind-the-Blog

How to Use the Tool

1. Scroll down to the Reading Time & Progress Bar Generator

2. Enter:

   • One or more blog slugs (one per line)

   • Your preferred reading speed (optional)

   • The maximum time to use for the progress color gradient (optional)

3. Click Generate Code

4. Copy the resulting code

5. Go to your blog post in Squarespace → ⚙️ Pages → Website Tools → Code Injection → Footer Code

6. Paste the code and save

That’s it — the script will only run on pages that match one of your slugs and will automatically calculate the reading time.

Optional Customizations

• Change the Word Per Minute value to fit your writing style or audience

• Adjust the max time to change how early the progress bar turns green

• You can also edit the background color, border radius, or font directly in the code block if you want to match your theme

Troubleshooting

• If nothing shows up:
  → Check that the page contains an <h1> heading (usually your blog title)
  → Double check that the slug is correct and starts with a forward slash (e.g. /blog)

• If the bar appears on pages where it shouldn’t:
  → Make sure you’ve only included slugs for article sections, not site-wide or parent pages like /

Simply put

This tool is a quick win for any content-heavy Squarespace blog. It improves UX, shows visitors what to expect, and gives your layout a small but meaningful touch of interactivity. All without installing third-party tools.