Author: | abhiib02 |
---|---|
Views Total: | 85 views |
Official Page: | Go to website |
Last Update: | September 10, 2023 |
License: | MIT |
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 */ }