Reading Time & Progress Bar Generator
📚 Reading Time & Progress Bar Generator
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
Disclaimer
This script is provided as-is with no guarantees. While it's designed to be safe for most Squarespace sites, always test changes before going live — especially if you’ve installed third-party plugins, custom fonts, or heavy integrations. By using this code, you accept that we are not liable for any unexpected behavior or performance changes.
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
Scroll down to the Reading Time & Progress Bar Generator
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)
Click Generate Code
Copy the resulting code
Go to your blog post in Squarespace → ⚙️ Pages → Website Tools → Code Injection → Footer Code
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.
