Simple Scroll Progress Indicator For Long Pages – PageBar.js

Category: Javascript | September 10, 2023
Author:abhiib02
Views Total:85 views
Official Page:Go to website
Last Update:September 10, 2023
License:MIT

Preview:

Simple Scroll Progress Indicator For Long Pages – PageBar.js

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 */
}

You Might Be Interested In:


Leave a Reply