Create a playback progress bar

Whether you have a blog or content to read, providing a reading progress bar is truly necessary for the comfort of your users. This article will teach you how to do it!

You can find the entire tutorial on our Instagram account.

Step 1

The HTML code to place the progress bar.

<div class="progress_bar"></div>

A simple class is enough in the HTML. As for the content, you can use lipsum.com to find placeholder text.

Step 2

Now let's style the progress bar.

.progress_bar {
  height: 10px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

Here, we place the progress bar in a fixed position so that it always stays at the top of the screen.

By specifying top, left, and right, we ensure that it occupies the entire width.

Step 3

Our progress bar is placed and styled, so now let's handle the JavaScript.

const progressBar = document.querySelector('.progress_bar');
progressBar.style.display = "none";

window.addEventListener('scroll', handleScroll);

function handleScroll() {
  progressBar.style.display = "block";
  const height = document.body.scrollHeight; // site height
  const windowHeight = window.innerHeight; // viewport height
  const position = window.pageYOffset; // pixel position of the document
  
  const trackLength = height - windowHeight; // site height - the part currently displayed on the screen (example: 1000px)
  
  const percentage = 
        Math.floor((position / trackLength) * 100); // percentage of the site already scrolled
  
  progressBar
      .style.right = 100 - percentage + '%';
}

Thanks to addEventListener, we execute the handleScroll function on every scroll movement in the browser (using the window object).

We then calculate the difference between the document height (height) and the user's viewport height (windowHeight) to detect the displayed percentage.

We then shift the progress bar by x% based on the content remaining to be displayed.

If you want to have an advanced reading progress bar, with the display of the remaining percentage to read, you can find a demonstration with the associated source code here: see the improved version