How to create a page scroll indicator with javascript

Updated: 22-Nov-2022 | Tags: HTML, CSS and Javascript | Views: 308


Hi guys, in this article we are going to create a horizontal scroll indicator, which will show us how much we have scrolled down the page. If you thing that it's something difficult to achieve, i have to tell you that we only need six lines of javascript code to make this work.

I have prepared an example below which we are going to recreate in this tutorial.
Now, in the example we have a simple html page with the navigation menu fixed at the top, and the content below. If you scroll down the page you will see a progress indicator above the nav bar.

Now that you have seen the example let's see how we do this.

Project's folder

Let's see the files that we need.

  • We are going to have an index.html file, in which we will create our page.
  • We are going to have a script.js file, to write the javascript code.
  • And we are going to have a styles.css stylesheet, to style the page. I am going to cover only the important css rules that matter. You can get all the css code by downloading the project's files.
    The download button is located at the end of the page.

Now let's start coding the html.

The index file

In the index file we are starting with a basic HTML page structure. The important things here are the link to the stylesheet in line 6, and the script tag that points to the javascript file in line 12.

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<title>On scroll progress bar</title>

	<script src="script.js"></script> 

The navigation menu.

Inside the body tags we are going to create a div element with a class of "nav-wrapper". This element will hold the navigation menu and the progress bar indicator. The "progress-bar" is placed above the nav element, so it shows up at the top of the page.

	<div class="nav-wrapper">
		<div class="progress-bar"></div>
			<a href="#">Home</a>
			<a href="#">Products</a>
			<a href="#">About</a>
			<a href="#">Contact</a>

In the css file we have the below two rules to make the "nav-wrapper" element stick at the top of the page, and to style the "progress-bar" element.

	position: sticky;
	top: 0;
	background-color: white;
	height: 5px;
	width: 0;
	background-color: #6ebce3;
  • To make the "nav-wrapper" element stick, we are setting it's position property to sticky in line 2, and in line 3 we define how far from the top we want the element to stay in position when we scroll the page. In our case we are setting the value to 0, so it stays at the top. If you set the value to 100 the element will stay in place 100px down from the top.
  • In line 6 we are targeting the "progress-bar" element.
    We set the height to 5px, and the width to zero. We are going to increase the width as we scroll, in the javascript file. This is how we will achieve the "progress-bar" effect.

Next in the index file and under the "nav-wrapper" element we will put our content.

	<!-- The page content  -->
	<p class="text">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. 
		Totam veritatis quibusdam sed. At natus distinctio doloribus, 
		nemo dicta veritatis ullam a eos eligendi nobis magni corporis, 
		temporibus porro, sint. Lorem ipsum dolor sit amet 
		consectetur adipisicing elit. 

		<!-- More content ....  -->

And that is all the html we need.

The javascript file

In the script.js file we have the javascript code which makes the "progress-bar" to work.

let progressBar = document.querySelector(".progress-bar");
let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.onscroll = function(){
	let progress = (scrollY / documentHeight) * 100; = progress + "%";

Code breakdown

  • In line 1 we are targeting the "progress-bar" element and we store the object in the progressBar variable.
  • In line 2 we calculate the height of our page minus the height of the visible viewport.
    This is done because we want to calculate how much we have scrolled down. The scrolled content is above the visible viewport, so to get the exact height of that content, we have to subtract the visible content in the viewport.
    To make it more clearer let me explain that the scrollHeight property gives us the whole height of our page, and the clientHeight property gives us the visible viewport's height. The documentElement property is targeting the html tag, that's why the scrollHeight property gives us the page's height, and the clientHeight property gives us the height of the visible viewport.
    Hope it makes sense.
  • In line 4 we assign on the window object an onscroll event-listener, so every time we scroll a function will run.
  • In line 5 we calculate the percentage number of the scrolled height. We take the scrollY property which gives us the current scrolled height and we divide it with the document height, and we multiply the result by 100.
    let progress = (scrollY / documentHeight) * 100;
  • And in line 6 we targeting the progress bar's width and assign the calculated percentage. This will make the progress bar to grow. = progress + "%";


And that's it. In this tutorial we saw how to create a page scroll progress bar using JavaScript.

Source code

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code.

You can download the source code and use it in any way you like.

Times downloaded: 47

View on Youtube

Buy me a coffee

If you like to say thanks, you can buy me a coffee.

Buy me a coffee with paypal

Comment section

You can leave a comment, it will help me a lot.

Or you can just say hi. 😉

Tutorial Categories