How to Add a Reading Progress Bar to Your Blog

15 Aug, 2018

Have you every looked at blogs like the HubSpot one and wondered how they add that bar at the top that shows how much you've read already?

 

readingProgressBar

 

I will show you how to build a simple custom module in minutes that you can use on any of your pages or blog pages. It uses a simple calculation to check the page height and how far you scrolled and sets the reading percentage based on it. 

 

 

The Code

The code below can be used on any website, as you can see on the CodePen above, and it will create a progress bar that will stick on scroll and show you your reading progress.

 

HTML


<!-- Progress Bar -->
<div class="progress-wrap progress sticky">
<div class="progress-bar progress"></div>
</div>

 

CSS


/* Progress Bar CSS */

div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}

.progress {
width: 100%;
height: 25px; /* Bar Height */
}

.progress-wrap {
background: #fee202; /* Bar Colour */
margin: 0;
overflow: hidden;
position: relative;
position: fixed; top
}

.progress-wrap .progress-bar {
background: #f2f2f2; /* Background Colour */
left: 0;
position: absolute;
top: 0;
}

 

JavaScript


$(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 + "%");
}

});

 

Add the Reading Progress Bar to Your HubSpot Blog

To apply this on your HubSpot blog, you can create a custom module on HubSpot. You can do this by going to your Design Manager, clicking on "New File" on the left-hand side and choosing the "Custom Module" option.

Set it to be available on Pages and Blogs and then paste the code above into each of the relevant sections that appear. You should have a module that looks like this: 

 

readingProgressModule

 

Customising your Reading Progress Module

In the CSS code above, I've highlighted a few elements in pink that you can change. These are the height of the bar in pixels and the colours for the bar background and the bar itself.

 

And that's it! You should be able to use this module in any of your templates and it will add a sticky reading progress module to the top. 

Topics: custom-module, tutorial

Join the Conversation!

Do you have a question, feedback or comments on this post?