Simple Scroll Progress Indicator For Long Pages – PageBar.js

Preview:

Description:

PageBar.js is a lightweight, dependency-free JavaScript library to create a visual indicator that shows how much of the page is left to scroll.

As users scroll down, the progress indicator appears on the top of the page and auto-expands to indicate their position on the page.

How to use it:

1. Download and add the PageBar.js script to your long webpage.

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

2. Initialize the PageBar.js and customize the indicator to match your site’s design using the pb_init function. You can adjust the color, shadow color, height, shadow depth, and border-radius. Here’s an example of how you might set it up:

pb_init(
  color = "#00f", // hex
  shadowColor="#0f0", // hex
  height= "10", // px
  shadow = "10", // px
  borderRadius="0" // px
);

3. For further customization, you can also use CSS to adjust the indicator’s appearance:

.bar {
  position:fixed;
  top:0;
  left:0;
  /* more styles here */
}