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 class="progress-wrap progress"><div class="progress-bar progress"></div>

    Another option you have is to use jQuery to place it just below the top of the page, like this: 

    $(document).ready(function() {
      $('<div class="progress-wrap progress"><div class="progress-bar progress"></div>').prependTo('body');
    });

    Style your progress bar

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

    .progress {
      width: 100%;
      height: 5px; /* Width of the bar */
    }
    .progress-wrap {
      background: #0171b2; /* Progress Colour */
      margin: 0;
      top: 0;
      overflow: hidden;
      position: fixed;
      z-index: 999;
    }
    .progress-wrap .progress-bar {
      background: #ebebeb; /* Background Colour */
      left: 0;
      position: absolute;
      top: 0;
    }

    Get it working

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

    $(window).scroll(function() {
      // Variables
      var height = $(document).height() - $(window).height();
      var scroll = $(window).scrollTop();

      // Read percent calculation
      var readPercent = (scroll / height) * 100;

      // Set progress bar width to read percent
      if (readPercent > 0) {
        $(".progress-bar").css("left", readPercent + "%");
      }
    });
    Note: this particular example uses jQuery. I've taken advantage of the fact that it's enabled by default on all HubSpot accounts as the code is really simple. However, I will likely update this post in the future with a JavaScript version.
    Last Updated: September 21, 2019

    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.

    💻

    Looking for a HubSpot website developer?

    I can 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 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.