Add a Reading Progress Bar on Squarespace

Table of Contents

Learn how you can easily add a reading progress bar to Squarespace so that your website visitors can visually see how much of the page they have read so far.

Before we begin, if your template has Ajax Loading. We need to disable that first. Go to DESIGN → SITE STYLES and look for AJAX LOADING and disable it by unchecking the box beside it.

Step 1 - Adding the JQuery

Go to SETTINGS → ADVANCED → CODE INJECTION and copy and paste the following code into the FOOTER section.

<div class="progress-bar-background">
    <div class="progress-bar" id="progressBar"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressBar").style.width = scrolled + "%";
}
</script>

Step 2 - Adding the CSS

Go to DESIGN → CUSTOM CSS and copy and paste the following code in there.

/* Background of progress bar */
.progress-bar-background {
  width: 100%;
  height: 5px;
  background: #ccc;
  position: fixed;
  top: 0;
  z-index: 999;
}

/* The progress bar */
.progress-bar {
  height: 5px;
  background: #ff7e00;
  width: 0%;
}

Step 3 - Only Display Bar on Blog Posts

If you don't want the bar to show on regular pages and only have it appear on blog posts, take out the code from Step 1 and then click the gear icon beside your blog page. In the popup that comes up, click on ADVANCED → PAGE HEADER CODE INJECTION, and paste the code from Step 1 in here instead. Now go to DESIGN → CUSTOM CSS and copy and paste the following code in there, just below the previous code that's already in there. This code will prevent the progress bar from displaying on the page that shows all your blog posts.

/* Hide bar on blog archive page */
.collection-type-blog.view-list .progress-bar-background, .collection-type-blog.view-list .progress-bar{
  display: none;
}

Bonus - Styling the Progress Bar As Needed

You can modify the CSS code from Step 2 to style your progress bar to match your website branding.

In the code for the background, you can change the "background: #ccc;" to whatever color you want the empty progress bar to be. You can move the progress bar to the bottom of the screen instead of the top by changing "top: 0;" to "bottom: 0;".

In the CSS code for the progress bar itself, you can change "background: #ff7e00;" to whatever color you want the bar to fill with.

If you want to make the progress bar thicker vertically, make sure you change the "height: 5px;" in both the background CSS and the progress bar CSS so that they match.

---

Video Instructions