How to Create a Scroll Progress Bar with JavaScript

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.

ALSO READ Random Background Color using JavaScript

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>