Add a reading progress bar to your HubSpot blog

Technical Difficulty: Advanced

Written by Stephanie O'Gay Garcia

First Published: September 21, 2019

Last Updated: April 18, 2022

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! (Last updated: April 18, 2022)

The code below can be used on your templates or pages to add a reading progress bar at the top of your page.

Create your progress bar

The reading progress bar can be added to a template or custom module using the following HTML snippet:

<div id="progress-wrapper" class="progress-wrapper">
<div id="progress-bar" class="progress-bar"></div>
</div>

Style your progress bar

You can add the CSS below to your stylesheet or custom module to add styling to the progress bar:

.progress-wrapper {
width: 100%;
height: 5px; /* Bar height */
background-color: #f9f9f7 ; /* Bar background colour */
position: -webkit-sticky;
position: sticky;
top: 0;
}
.progress-bar {
width: 0;
height: 5px; /* Bar height */
background-color: #fc8c7a; /* Bar progress colour */
}

Get it working

Adding the following snippet to the JavaScript file or custom module JS section should result in a working progress bar:

/* Declare your variables: the progress bar and the post container */
const progressWrapper = document.getElementById("progress-wrapper"),
      progressBar = document.getElementById("progress-bar"),
      container = document.getElementById("container"),
      body = document.body;

/* Math stuff */
function setProgress() {
let start = container.getBoundingClientRect().top,
      end = container.getBoundingClientRect().bottom,
      height = container.getBoundingClientRect().height;
if (start > 0) {
    let width = 0;
    progressBar.style.width = width;
} else {
    let width = Math.abs(start) / height * 100 + "%";
    progressBar.style.width = width;
}
}

/* Trigger the function on scroll */
window.addEventListener('scroll', setProgress);

The "container" highlighted in bold above is the ID for the container where you'd like the progress bar to start and end. For example, add a DIV in your Blog Content module around the post and give it an ID "post-wrapper", then swap that out above.

Sample

Reading Progress Bar Within Container

<div class="page">
  <div class="page-center">
    <!-- Post -->
    <div id="container" class="post">
      <!-- Progress Bar within "Post" Container -->
      <div id="progress-wrapper" class="progress-wrapper">
        <div id="progress-bar" class="progress-bar"></div>
      </div>
      <div class="post-content">
        <h1>Post Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet odio at vulputate lobortis. Sed in lacinia nisl. Vestibulum sit amet facilisis magna. Sed nec ex dapibus turpis egestas scelerisque eu ac tellus. Sed at mauris dolor. Proin sollicitudin, tortor at finibus egestas, nulla augue faucibus libero, at tristique leo quam in orci. Donec non sollicitudin orci. Duis nec libero at ipsum vestibulum tristique vel euismod ex. Proin laoreet sem non elit scelerisque, vitae condimentum ipsum tempus. Integer purus eros, volutpat sit amet risus sollicitudin, condimentum consequat purus. Phasellus molestie ipsum tellus, a iaculis orci semper a. Vestibulum tempus felis ac sollicitudin ullamcorper. Aenean vel purus facilisis, scelerisque metus at, mollis metus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel odio magna. Nullam a sapien vestibulum, iaculis lectus sed, consectetur lacus. Pellentesque neque odio, auctor ut auctor at, euismod quis sem. Nunc vel augue vel orci aliquet interdum eget vitae enim. Vivamus nunc arcu, varius in mattis eget, vulputate eget libero. In metus tellus, tincidunt eget lorem eget, convallis auctor elit. Aliquam enim sem, iaculis sit amet nisl sit amet, semper tempus lectus. Mauris sollicitudin, mauris ac vestibulum tempus, justo libero blandit nulla, in varius velit metus eget purus. Pellentesque a massa at dolor accumsan commodo. Phasellus auctor, mi in luctus bibendum, nulla risus mattis dui, eget facilisis risus ante nec orci.</p>
        <p>Sed ultrices neque at quam imperdiet scelerisque non vitae dolor. Integer imperdiet rutrum turpis accumsan egestas. In ut tortor eget libero venenatis fermentum quis sit amet mauris. Curabitur dapibus libero elit. In ut nisi pulvinar odio malesuada porta non vitae tellus. Vestibulum commodo hendrerit lacus. Aenean interdum arcu ac nibh vehicula mattis.</p>
        <div class="img">Image</div>
        <p>Etiam quis iaculis odio, eu fermentum felis. Vestibulum finibus nibh urna, et scelerisque sapien blandit quis. In ex felis, semper id velit ut, convallis auctor leo. Duis sed malesuada dui. Integer tristique ultricies elementum. Nam lacinia viverra quam et eleifend. Phasellus ultrices sollicitudin purus non sagittis. Aliquam lacinia vulputate turpis eget ultrices. Ut varius finibus turpis ut pellentesque. Nam malesuada viverra ante, et aliquet diam efficitur suscipit.</p>
        <p>Mauris volutpat diam non purus congue, et eleifend ante porta. Phasellus viverra erat sed hendrerit fringilla. In hac habitasse platea dictumst. Vivamus ac ligula egestas nisi convallis venenatis id quis magna. Nam dapibus, arcu quis pharetra placerat, nisi dui vehicula leo, ac interdum risus augue id magna. Suspendisse potenti. Nullam maximus tincidunt dolor, non fringilla erat scelerisque interdum. Nulla dapibus, tellus at efficitur rhoncus, ligula odio luctus libero, at tempor nisl dolor nec leo. Nunc ac libero facilisis, pulvinar nisl non, dignissim mi.</p>
        <div class="img">Image</div>
        <p>Sed ultrices neque at quam imperdiet scelerisque non vitae dolor. Integer imperdiet rutrum turpis accumsan egestas. In ut tortor eget libero venenatis fermentum quis sit amet mauris. Curabitur dapibus libero elit. In ut nisi pulvinar odio malesuada porta non vitae tellus. Vestibulum commodo hendrerit lacus. Aenean interdum arcu ac nibh vehicula mattis.</p>
        <div class="img">Image</div>
        <p>Etiam quis iaculis odio, eu fermentum felis. Vestibulum finibus nibh urna, et scelerisque sapien blandit quis. In ex felis, semper id velit ut, convallis auctor leo. Duis sed malesuada dui. Integer tristique ultricies elementum. Nam lacinia viverra quam et eleifend. Phasellus ultrices sollicitudin purus non sagittis. Aliquam lacinia vulputate turpis eget ultrices. Ut varius finibus turpis ut pellentesque. Nam malesuada viverra ante, et aliquet diam efficitur suscipit.</p>
      </div>
    </div>
  </div>
</div>