Add a reading progress bar to your HubSpot blog

    Difficulty Level: Advanced. This post assumes a strong understanding of HubSpot tools and technical knowledge. Insutructions are given as guidelines and may require additional customisation.

    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>

    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; = width;
      } else {
        let width = Math.abs(start) / height * 100 + "%"; = 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.


    Check it out on Codepen:

    See the Pen Reading Progress Bar Within Container by Stephanie O'Gay Garcia (@stephanieogaygarcia) on CodePen.

    Written by: Stephanie O'Gay Garcia Orginally Published: September 21, 2019 Last Updated: April 18, 2022

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    New call-to-action

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.