Step By Step Guide to Add a Reading Progress Bar to Your Squarespace Site

Learn how to integrate a reading progress bar into your Squarespace website, enabling your visitors to visually track their page consumption. Grow your user engagement by implementing this feature, allowing a dynamic and interactive element to guide users through your content. The incorporation of a reading progress bar not only offers a modern touch to your site but also ensures a user-friendly experience, encouraging prolonged engagement. 
Follow the steps below to effortlessly incorporate this visual cue and provide your audience with an intuitive way to gauge their progress while navigating your web pages.

Add the JQuery first

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

Code:

<div class="visualizer-background">

    <div class="visualizer" id="scrollVisualizer"></div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

window.onscroll = function() {monitorScroll()};

function monitorScroll() {

  var currentScroll = document.body.scrollTop || document.documentElement.scrollTop;

  var totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  var scrollPercentage = (currentScroll / totalHeight) * 100;

  document.getElementById("scrollVisualizer").style.width = scrollPercentage + "%";

}

</script>

Add the CSS

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

Code:

/* Styling for the background of the scroll indicator */
.visualizer-background {
  width: 100%;
  height: 5px;
  background: #ccc;
  position: fixed;
  top: 0;
  z-index: 999;
}
  
/* Customization of the scroll indicator */
.visualizer {
  height: 5px;
  background: #ff7e00;
  width: 0%;
}

If You want Only Display Bar on Blog Posts

To ensure the bar doesn't appear on regular pages but only on blog posts, remove the code mentioned in Step 1. Afterward, click on the gear icon next to your blog page. In the ensuing window, navigate to ADVANCED → PAGE HEADER CODE INJECTION. Paste the code from Step 1 here. Proceed to DESIGN → CUSTOM CSS and insert the subsequent code below the existing one. 

This coding adjustment will prevent the progress bar from being visible on the page showcasing all your blog posts.

Code:

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