Free Tool

Scroll Progress Bar

Add a visual scroll progress indicator to your Squarespace site. Customize color, height, and position — then copy the code into your Code Injection settings.

Why this matters

A scroll progress bar gives readers a visual cue for how much content remains. It reduces bounce rates on long-form posts by showing readers they’re making progress. Especially useful for blog posts, case studies, and documentation pages.

Customize

3px

Background

Advanced

9999

Live Preview

Scroll inside the preview to see the progress bar in action.

Generated Code

<style>
  .scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
  }
  .scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: #000000;
    transition: width 80ms linear;
  }
</style>

<script>
(function() {
  var container = document.createElement('div');
  container.className = 'scroll-progress-container';
  var bar = document.createElement('div');
  bar.className = 'scroll-progress-bar';
  container.appendChild(bar);
  document.body.appendChild(container);

  function updateProgress() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
    var progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
    bar.style.width = Math.min(progress, 100) + '%';
  }

  window.addEventListener('scroll', updateProgress, { passive: true });
  updateProgress();
})();
</script>

How to add this to Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Paste the generated code into the Footer section.
  3. Click Save and preview your site.
  4. The progress bar appears automatically on every page.

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →