Contact

    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>
    </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

    Check it out on Codepen:

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

    Last Updated: April 4, 2020

    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.

    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

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

    Get in touch

    Not using HubSpot yet?

    HubSpot offers a free CRM as well as Marketing, Sales and Services tools (with free options too!) and a powerful CMS. Learn more here.

    Note, as a HubSpot affiliate I will get a commission if you click on the link above and end up purchasing an upgraded version. No pressure though!

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Designer & 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.