Adding a scroll progress bar is a great way to enhance user experience, especially on content-rich pages. This simple feature provides users with a visual cue of how far they’ve scrolled through the page and how much content is left to explore. In this article, we’ll walk you through creating a scroll progress bar using HTML, CSS, and JavaScript.
What is a Scroll Progress Bar?
A scroll progress bar is a small, usually horizontal bar that fills up as you scroll down the page. It shows users how much of the page content they’ve viewed and can be especially useful on long articles, blogs, or documentation sites.
Follow this video for complete guidance :
Let’s dive into the code!
Step 1: Setting Up HTML
First, we need to create an HTML element for the progress bar. This will be a simple
element positioned at the top of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Progress Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Progress bar at the top -->
<div id="progressBar"></div>
<!-- Page content -->
<div class="content">
<h1>Welcome to My Blog!</h1>
<p>Start scrolling to see the progress bar in action.</p>
<!-- Add more content here to make the page scrollable -->
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling the Progress Bar with CSS
Next, we’ll style the #progressBar element in CSS to make it look like a bar and set it to a fixed position at the top of the page. This way, it will always stay visible as the user scrolls.
Create a file called style.css and add the following styles:
/* Style for the progress bar */
#progressBar {
position: fixed;
top: 0;
left: 0;
height: 5px;
width: 0%; /* Initial width is 0% */
background-color: #4caf50; /* Green color for the progress bar */
z-index: 99; /* Make sure it stays on top of other elements */
}
/* Additional styling for the page content */
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
margin-top: 80px;
}
Here, we set the progressBar to a fixed position at the top with an initial width of 0%. As we scroll, we’ll dynamically change this width to reflect the scroll progress.
Step 3: Adding JavaScript to Track Scrolling
Now, let’s use JavaScript to calculate the scroll position and update the width of the progress bar accordingly.
Create a file named script.js and add the following JavaScript code:
// Function to update the scroll progress bar
window.onscroll = function () {
updateProgressBar();
};
function updateProgressBar() {
// Get the scroll position and the total scrollable height
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
// Calculate the scroll percentage
let scrollPercentage = (scrollTop / scrollHeight) * 100;
// Update the width of the progress bar based on scroll percentage
document.getElementById("progressBar").style.width = scrollPercentage + "%";
}
Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Progress Bar</title>
<style>
/* Style for the progress bar */
#progressBar {
position: fixed;
top: 0;
left: 0;
height: 5px;
width: 0%; /* Initial width is 0% */
background-color: #4caf50; /* Green color for the progress bar */
z-index: 99; /* Make sure it stays on top of other elements */
}
/* Additional styling for the page content */
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
margin-top: 80px;
}
</style>
</head>
<body>
<!-- Progress bar at the top -->
<div id="progressBar"></div>
<!-- Page content -->
<div class="content">
<h1>Welcome to My Blog!</h1>
<p>Start scrolling to see the progress bar in action.</p>
<!-- Add more content here to make the page scrollable -->
</div>
<script>
// Function to update the scroll progress bar
window.onscroll = function () {
updateProgressBar();
};
function updateProgressBar() {
// Get the scroll position and the total scrollable height
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
// Calculate the scroll percentage
let scrollPercentage = (scrollTop / scrollHeight) * 100;
// Update the width of the progress bar based on scroll percentage
document.getElementById("progressBar").style.width = scrollPercentage + "%";
}
</script>
</body>
</html>
