How to create a left to right scroll-based navigation progress bar

Pankaj yadav — Sat, 28 Jun 2025 13:31:06 +0000

<!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 (Top) -->
  <div class="progress-bar"></div>

  <!-- 🔽 Page Content -->
  <div class="content">
    <h1>Scroll to See Progress</h1>
    <p>This is a demo of a scroll-based navigation progress bar. Scroll down to see the bar move.</p>

    <!-- Dummy content to create scroll -->
    <div style="height: 3000px;"></div>
  </div>

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

Now we give styles

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* Progress Bar Styles */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #00bcd4;
  z-index: 9999;
  transition: width 0.25s ease-out;
}

/* Main Page Content */
.content {
  padding: 20px;
}

and lastly we integrate js

window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = (scrollTop / scrollHeight) * 100;

  document.querySelector(".progress-bar").style.width = scrollPercentage + "%";
});

🔍 How It Works

scrollTop: Kitna scroll hua hai
scrollHeight: Total scrollable height
clientHeight: Visible screen height
scrollPercentage: Ye calculation top scroll bar ka width define karti hai

✅ Output:
1.Aap scroll karte jaoge, to top me ek slim line move karti rahegi.

2.Ye visually batati hai ki aap kitna content scroll kar chuke ho.

DEV Community: Pankaj yadav

How to create a left to right scroll-based navigation progress bar