Go check out Daily Developer Jokes, my latest project!
Here's the joke from today:
I just recently added a fun little feature on my website at xtrp.io: a progress bar when reading blog posts. The bar would show how far users have progressed in reading a post, from 0% at the beginning to when a user finishes reading at 100%.
This little feature has become particularly popular among other blogs and Wordpress themes in recent years. For example, the popular tech publication TechCrunch uses a circular scroll progress bar, and many other sites have a similar feature. In fact, if you're reading this on xtrp.io, then you may be able to see this feature on the top of your screen!
Below is a quick tutorial and explanation of a horizontal scroll progress bar with a demo on CodePen.
Live Demo and Final CodePen
Writing the HTML & CSS
To start off, let's create a post container
div, which will include the HTML contents of the blog post that your viewers will be reading. Within that
div, we'll also include a progress bar element for the scroll progress bar.
At the beginning of the post container element, let's add the progress bar HTML, which will look like this:
Note that in this post, I'll be using the BEM Methadology for CSS classnames. You can read more about the BEM Methadology and what it is here: How I Moved a Step Closer to Clean CSS and How You Can Too (with the BEM Methodology).
Here is the basic CSS for this:
Note that in this case, the CSS assumes that the
.post-container element is the scrollable area in this case (as defined with the
overflow: scroll line), but you can change this to be a different element or the
body element yourself if you'd like.
I'm also using CSS variables for the progress bar height and color, so that it is easier to change the properties of the progress bar if you'd like. You can read more about CSS variables and what they are here: CSS Variables Explained in 2 Minutes with an Interactive Demo.
Here's what this looks like when I set the width to 50% for example (with example content in the post container):
Creating a Function to Update the Progress Bar Width
Let's create a function which checks the current scroll position and calculates the percentage of the post read, and then set the progress bar width accordingly.
To make the scroll percentage calculation, let's divide the current scroll position (from the
scrollTop property) by the full scroll height of the element (calculated with a function I got from Stack Overflow).
I then set the width style of the progress bar element to that calculated percentage.
Here's the code for that:
Calling the Function While Scrolling
To put all of this together and make everything work, we'll need to call the function everytime a user scrolls and when the page is loaded. For that, it's possible bind the function to the
onscroll event of the post container, and the
onload event of the window.
And with that, we're finished. Here is the final CodePen:<p class="codepen" data-height="386" data-theme-id="default" data-default-tab="result" data-user="xtrp" data-slug-hash="mdyYRQz" style="height: 386px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Scroll Progress Bar Demo"> <span>See the Pen <a href="https://codepen.io/xtrp/pen/mdyYRQz"> Scroll Progress Bar Demo</a> by Gabriel Romualdo (<a href="https://codepen.io/xtrp">@xtrp</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p></p>
I hope you liked this post, and found this to be useful.
— Gabriel Romualdo, February 5, 2020