How to create a page scroll indicator with javascript

Updated: 22-Nov-2022 / Tags: HTML, CSS and Javascript / Views: 671 - Author: George

Introduction

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">
<head>
	<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>
</head>
<body>


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

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>
		<nav>
			<a href="#">Home</a>
			<a href="#">Products</a>
			<a href="#">About</a>
			<a href="#">Contact</a>
		</nav>
	</div>

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.

.nav-wrapper{
	position: sticky;
	top: 0;
	background-color: white;
}
.progress-bar{
	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 ....  -->
	</p>

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;
	progressBar.style.width = 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. 
		progressBar.style.width = progress + "%";

Summary

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

Last Words

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.

Source code

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

Times downloaded: 115

Buy me a coffee

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

Buy me a coffee with paypal

Great Udemy Courses

Image of an udemy course about web development

2025 ChatGPT Complete Guide: Learn Midjourney, ChatGPT 4 & More

ChatGPT Plugins + 25 Powerful AI Tools 10x Your Productivity & Creativity | ChatGPT, Generative AI, Prompt Engineering

The Complete Full-Stack Web Development Bootcamp 2025

Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and DApps

Complete Modern PHP Developer Course in 2024

The modern PHP course with a project, challenges and theory. Includes SQL and MVC Framework. Get started with PHP 8!

The Complete JavaScript Course 2025: From Zero to Expert!

Master Python by building 100 projects in 100 days. Learn data science, automation, build websites, games and apps!

100 Days of Code: The Complete Python Pro Bootcamp

Master Python by building 100 projects in 100 days. Learn data science, automation, build websites, games and apps!

Created By Digitalfox

thumbnail of a responsive navigation system

Responsive navigation with working login system using PHP Mysql and Ajax

Responsive navigation menu that integrates a secure login and register system, with a forgot password action, and a contact form.
The whole system is animated in slide-in sidebars and shows up on the right side of the web-design.