Add a Scrolling Progress Bar to Your Article That Visualises How Much Has Been Read

A nice and easy one today to show you how to add a scrolling progress bar to your website – or article, that visualises how much of an article has been read (or how much a user has scrolled down the page).

We’ll use three files for this:

  • index.html
  • style.css
  • main.js

A demo of this tutorial can be found here.

1. Laying The Foundation For Our Scrolling Progress Bar

Let’s first start with the HTML page that will act as our ‘article’ page, and our stylesheet.

  • index.html
  • style.css
<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Create a Scrolling Progress Bar With JavaScript</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <style rel="stylesheet" href="style.css">
	
</head>

<body>
		
	<div id="progress-bar-wrapper">
		<div id="progress-bar"></div>
	</div>
		
	<div id="content-area">
		
		<h1>They See Me Scrolling, They Hating...</h1>
		
		<p>In auctor, libero non luctus accumsan, ligula felis imperdiet tortor, id sollicitudin mi diam eget nibh. Duis enim libero, 
			commodo eget massa eu, mattis vestibulum lorem. Praesent eget luctus urna. Nunc ornare et mauris non sodales. Quisque eget 
			quam ac nulla gravida luctus. Nam convallis, odio nec fringilla viverra, lorem elit porttitor erat, eu feugiat lorem ligula 
			eget ligula. Nunc porta ac lacus non tristique. Aenean vehicula imperdiet enim, convallis tristique quam laoreet at. Nunc 
			scelerisque dui nunc, id ultrices tellus fringilla at. Proin ex risus, lacinia tincidunt sem vel, auctor tristique nunc. 
			Aliquam diam risus, fermentum ac ante non, convallis porttitor mi. Etiam quis condimentum ipsum, id viverra libero.</p>
		
		<p>Nulla facilisi. Maecenas et dictum leo. Sed pellentesque tempus arcu tristique rutrum. Etiam ligula lorem, aliquam vel elit porttitor, 
			maximus malesuada ante. Nam ac tellus ut leo sollicitudin pulvinar. Integer ac placerat dui. Nam consequat lectus tortor, in faucibus 
			magna accumsan quis. Maecenas ut ante purus. Suspendisse eu arcu enim. Cras vestibulum justo elit, vitae rhoncus metus auctor at. 
			Vivamus condimentum neque pretium erat ultricies, euismod pulvinar quam finibus. Curabitur ut nibh suscipit, scelerisque nunc 
			congue, egestas tellus. Aenean at tortor id orci ullamcorper semper et nec lacus. Aliquam erat volutpat. Nunc mollis est ac urna 
			ultricies commodo. Nam rutrum felis in pharetra dictum.</p>
		
		<p>Nullam pulvinar vitae nisl consectetur suscipit. Nulla facilisi. Ut et ante id leo condimentum varius viverra at magna. 
			Proin eget quam ante. Mauris faucibus sapien risus, quis hendrerit tortor hendrerit eget. Cras sem turpis, auctor et leo 
			et, feugiat porttitor odio. Donec sed sem lectus. Nulla in tincidunt augue. Vivamus vel semper neque, quis mattis augue. Integer 
			viverra lorem eget mauris vulputate aliquet vel sed massa. Duis facilisis diam nec dapibus pretium. Fusce tempor lacinia lacus 
			vulputate porttitor. Vivamus vel tincidunt turpis, at egestas ante.</p>
		
		<p>Vivamus eu ligula sed ex tincidunt pellentesque at a neque. Donec non viverra augue, nec sollicitudin nisl. Maecenas in gravida nulla, in 
			elementum arcu. Phasellus ullamcorper lectus vel turpis suscipit aliquet. In rutrum lorem ac tincidunt tincidunt. Vestibulum et justo a 
			eros aliquet sodales. Suspendisse potenti.</p>
		
		<p>Curabitur vestibulum lacus sed ipsum elementum blandit. Aliquam erat volutpat. Nullam tempor sem varius elit euismod, quis mollis libero sagittis. 
			Nullam quis consectetur lectus. Phasellus laoreet odio at ante finibus, nec sodales odio lobortis. Ut scelerisque leo mattis erat porttitor 
			dignissim. Mauris interdum libero in est rutrum, at rhoncus nunc gravida. In ac molestie enim. Vestibulum ante ipsum primis in faucibus orci 
			luctus et ultrices posuere cubilia curae; Pellentesque non placerat diam. Vivamus at velit placerat, efficitur leo non, varius nisl. Sed 
			rutrum ex ut neque auctor imperdiet. Morbi hendrerit ut quam lobortis sollicitudin. Quisque sit amet velit in tortor suscipit sollicitudin. 
			Nulla blandit ligula blandit, scelerisque massa sed, lacinia risus.</p>
		
		<p>Vestibulum faucibus ultricies erat eu aliquet. Pellentesque luctus eros et blandit pulvinar. Etiam lectus odio, dapibus a convallis eget, pulvinar ut 
			augue. Aliquam eleifend id metus ut consectetur. Donec tempus ultrices tempus. Phasellus ac sollicitudin orci. Nulla auctor, orci ac sodales 
			commodo, leo turpis euismod dolor, sit amet egestas mi libero ac nibh. Donec sollicitudin ante ac massa condimentum tempor. Donec nec nibh cursus, 
			semper ligula eget, finibus felis. Fusce laoreet nulla velit. Aliquam a nulla ultrices, venenatis purus nec, dictum odio. Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit. Sed finibus rutrum neque et efficitur. Phasellus vulputate nec erat mattis aliquet. Proin at neque ullamcorper, 
			sodales sem quis, malesuada odio. Donec id dignissim metus, et tempor mi.</p>
		
		<p>In tincidunt dui mi, a dignissim metus commodo et. Quisque bibendum libero in ligula luctus laoreet. Nullam facilisis ut sapien vitae convallis. 
			Donec varius, metus vel ultricies pulvinar, metus leo maximus dui, nec convallis justo lorem id mauris. Nam sit amet convallis odio, ac molestie turpis. 
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt justo eu tempus scelerisque. Morbi eget velit id augue tempor sagittis. 
			Mauris sollicitudin magna a elit fermentum, non porttitor ligula ultricies. Sed et enim libero.</p>
		
		<p>Quisque urna erat, bibendum sed turpis eget, posuere posuere metus. Curabitur ac sodales justo. Pellentesque sodales arcu et elit tincidunt, nec placerat 
			diam consectetur. Nunc sit amet velit nec enim gravida aliquam. Vestibulum viverra, tortor molestie tristique auctor, lectus purus aliquam enim, eget 
			viverra quam libero eget neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consectetur 
			dignissim posuere. Mauris ultrices, diam eget maximus porttitor, magna diam porta erat, non fringilla lectus lectus placerat magna. Vivamus vel lorem 
			sit amet massa congue rutrum eu quis diam. Nunc enim lectus, varius quis arcu id, malesuada hendrerit purus. Etiam molestie viverra metus sed malesuada. 
			Cras et massa dapibus, vehicula magna et, dictum odio. Proin sem magna, accumsan et lobortis eu, sagittis at ex. Phasellus pharetra pharetra mauris, eu 
			lacinia urna. Aliquam ex risus, volutpat sit amet eleifend ut, fermentum ac sem.</p>
		
		<p>Nullam pulvinar vitae nisl consectetur suscipit. Nulla facilisi. Ut et ante id leo condimentum varius viverra at magna. 
			Proin eget quam ante. Mauris faucibus sapien risus, quis hendrerit tortor hendrerit eget. Cras sem turpis, auctor et leo 
			et, feugiat porttitor odio. Donec sed sem lectus. Nulla in tincidunt augue. Vivamus vel semper neque, quis mattis augue. Integer 
			viverra lorem eget mauris vulputate aliquet vel sed massa. Duis facilisis diam nec dapibus pretium. Fusce tempor lacinia lacus 
			vulputate porttitor. Vivamus vel tincidunt turpis, at egestas ante.</p> 
		
		<p>Vivamus eu ligula sed ex tincidunt pellentesque at a neque. Donec non viverra augue, nec sollicitudin nisl. Maecenas in gravida nulla, in 
			elementum arcu. Phasellus ullamcorper lectus vel turpis suscipit aliquet. In rutrum lorem ac tincidunt tincidunt. Vestibulum et justo a 
			eros aliquet sodales. Suspendisse potenti.</p>  
		
		<p>Curabitur vestibulum lacus sed ipsum elementum blandit. Aliquam erat volutpat. Nullam tempor sem varius elit euismod, quis mollis libero sagittis. 
			Nullam quis consectetur lectus. Phasellus laoreet odio at ante finibus, nec sodales odio lobortis. Ut scelerisque leo mattis erat porttitor 
			dignissim. Mauris interdum libero in est rutrum, at rhoncus nunc gravida. In ac molestie enim. Vestibulum ante ipsum primis in faucibus orci 
			luctus et ultrices posuere cubilia curae; Pellentesque non placerat diam. Vivamus at velit placerat, efficitur leo non, varius nisl. Sed 
			rutrum ex ut neque auctor imperdiet. Morbi hendrerit ut quam lobortis sollicitudin. Quisque sit amet velit in tortor suscipit sollicitudin. 
			Nulla blandit ligula blandit, scelerisque massa sed, lacinia risus.</p>
		
		<p>Nullam pulvinar vitae nisl consectetur suscipit. Nulla facilisi. Ut et ante id leo condimentum varius viverra at magna. 
			Proin eget quam ante. Mauris faucibus sapien risus, quis hendrerit tortor hendrerit eget. Cras sem turpis, auctor et leo 
			et, feugiat porttitor odio. Donec sed sem lectus. Nulla in tincidunt augue. Vivamus vel semper neque, quis mattis augue. Integer 
			viverra lorem eget mauris vulputate aliquet vel sed massa. Duis facilisis diam nec dapibus pretium. Fusce tempor lacinia lacus 
			vulputate porttitor. Vivamus vel tincidunt turpis, at egestas ante.</p> 
		
		<p>Vivamus eu ligula sed ex tincidunt pellentesque at a neque. Donec non viverra augue, nec sollicitudin nisl. Maecenas in gravida nulla, in 
			elementum arcu. Phasellus ullamcorper lectus vel turpis suscipit aliquet. In rutrum lorem ac tincidunt tincidunt. Vestibulum et justo a 
			eros aliquet sodales. Suspendisse potenti.</p>  
		
		<p>Curabitur vestibulum lacus sed ipsum elementum blandit. Aliquam erat volutpat. Nullam tempor sem varius elit euismod, quis mollis libero sagittis. 
			Nullam quis consectetur lectus. Phasellus laoreet odio at ante finibus, nec sodales odio lobortis. Ut scelerisque leo mattis erat porttitor 
			dignissim. Mauris interdum libero in est rutrum, at rhoncus nunc gravida. In ac molestie enim. Vestibulum ante ipsum primis in faucibus orci 
			luctus et ultrices posuere cubilia curae; Pellentesque non placerat diam. Vivamus at velit placerat, efficitur leo non, varius nisl. Sed 
			rutrum ex ut neque auctor imperdiet. Morbi hendrerit ut quam lobortis sollicitudin. Quisque sit amet velit in tortor suscipit sollicitudin. 
			Nulla blandit ligula blandit, scelerisque massa sed, lacinia risus.</p>
		
		<p>Vestibulum faucibus ultricies erat eu aliquet. Pellentesque luctus eros et blandit pulvinar. Etiam lectus odio, dapibus a convallis eget, pulvinar ut 
			augue. Aliquam eleifend id metus ut consectetur. Donec tempus ultrices tempus. Phasellus ac sollicitudin orci. Nulla auctor, orci ac sodales 
			commodo, leo turpis euismod dolor, sit amet egestas mi libero ac nibh. Donec sollicitudin ante ac massa condimentum tempor. Donec nec nibh cursus, 
			semper ligula eget, finibus felis. Fusce laoreet nulla velit. Aliquam a nulla ultrices, venenatis purus nec, dictum odio. Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit. Sed finibus rutrum neque et efficitur. Phasellus vulputate nec erat mattis aliquet. Proin at neque ullamcorper, 
			sodales sem quis, malesuada odio. Donec id dignissim metus, et tempor mi.</p>
	</div>
		
	<script src="main.js"></script>
	
</body>
</html>
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
h1,
p {
   margin-bottom: 15px;
   line-height: 24px;
}

The main parts of this mark-up page, and stylesheet are:

  • We’ve included our style.css file.
  • Add a #progress-bar-wrapper div that will house our #progress bar.
  • And we have our #content-area that will act as our article.
  • In our CSS, we have reset the page’s paddings, margins, and added our preferred box-sizing value.

And what we’re left with so far is this:

2. Styling up Our HTML Page

There’s not too much explanation needed here for the CSS, other than we have created a #progress-bar-wrapper that will be fixed to the top of the web page, and inside of this is the #progress-bar that will display the progress of how much of the article has been scrolled down.

  • style.css
...

#progress-bar-wrapper {
   width: 100%;
   height: 50px;
   background-color: #eee;
   position: fixed;
   top: 0;
   z-index: 1;
}
   #progress-bar {
      height: 100%;
      background-color: #de466c;
      width: 0;
}

#content-area {
   position: relative;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 30px 30px 0px 30px;
   border: 1px solid #ccc;
   margin-top: 100px;
   margin-bottom: 50px
}

And with the CSS added, we get the following…

3. Adding the Magic JavaScript

All that’s left to do is add the special sauce to tie the progress bar to scrolling height of our #content-area to make our scrolling progress bar come to life!

  • main.js
const progressBar = document.getElementById("progress-bar");
const contentArea = document.getElementById("content-area");

function updateProgressBar() {	
   const contentAreaHeight = contentArea.offsetHeight - window.innerHeight + 100;
   const scrolled = window.scrollY;		
   const scrollPercentage = (scrolled / contentAreaHeight) * 100;		
   progressBar.style.width = scrollPercentage + "%";
}

window.addEventListener("scroll", updateProgressBar);
window.addEventListener("resize", updateProgressBar);

Notes:

Here’s a little run down on what’s going on in our JavaScript file:

First we declare two variables to target the #progress-bar div, and the #content-area div.

const progressBar = document.getElementById("progress-bar");
const contentArea = document.getElementById("content-area");

Here we create a function called updateProgressBar that will perform all of the necessary progress bar / scrolling calculations.

function updateProgressBar() {

}

Inside of our updateProgressBar function we declare three variables

const contentAreaHeight = contentArea.offsetHeight - window.innerHeight + 100;

const scrolled = window.scrollY;

const scrollPercentage = (scrolled / contentAreaHeight) * 100;

Let’s go through these variables below:

  • contentAreaHeight
    contentAreaHeight calculates the height of the content that needs to be scrolled through. It subtracts the height of the visible portion of the window (window.innerHeight) from the total height of the content area (contentArea.offsetHeight). Also, I have added an additional 100px here, to accomodate for the top margin of the #content-area.
  • scrolled
    This variable gets the current vertical scroll position of the page from the window object and assigns it to the variable scrolled.
  • scrollPercentage
    scrollPercentage calculates the percentage of how far the user has scrolled down the content area. It divides the scrolled distance by contentAreaHeight and then multiplies by 100 to get a percentage value.

Then we simply update our progress bar width with the percentage as the user scrolls down.

progressBar.style.width = scrollPercentage + "%";

The last thing we just need to do is tie this function to two event listeners – one when the page is scrolled, and one when the page is resized.

window.addEventListener("scroll", updateProgressBar);
window.addEventListener("resize", updateProgressBar);

Bish bash bosh, and we get the following:

You can grab the code from Github.

If this tutorial has helped you, I wouldn't say no to a coffee as a tip ☕️

Buy Me a Coffee at ko-fi.com

Leave a Reply

Your email address will not be published. Required fields are marked *