ScrollProgressJS

ScrollProgressJS is a lightweight JavaScript library that creates a customizable scroll progress indicator for web pages. It allows you to display a visual progress bar indicating how much of the page has been scrolled.

Features

Customizable Progress Bar: Configure color, height, and position of the progress bar.
Auto-Initialization: Automatically initializes if data-autoload attribute is set.
Responsive: Adjusts dynamically as users scroll through the page.
Lightweight: Simple and efficient library with no external dependencies.
Scroll Element Selector: Specify the element to track for scroll progress.

Installation

You can include ScrollProgressJS in your project via CDN, npm, or by downloading the script:

CDN

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/ScrollProgressJS@main/ScrollProgress.js"></script>

npm

npm install scroll-progress-indicator

Download

Download the latest release

Usage

Browser

Basic Initialization

To initialize ScrollProgressJS with default settings:

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/ScrollProgressJS@main/ScrollProgress.js" data-autoload="true">

…

💡 Tips to Speed Up Your Website Loading Time 💨

Sh Raj on April 05, 2024

💡 Tips to Speed Up Your Website Loading Time 💨 Know More :- https://codexdindia.blogspot.com/2024/04/tips-to-speed-up-your-website-load...

Read full post

Madhu Saini • Apr 5 • Edited

Information rich Article!

Thanks for sharing

Sh Raj • Apr 5

Rich or Rick
Is it a new word that I don't know 🤔

Sh Raj • Apr 6

This Article is also in the Google feeds

Madhu Saini • Apr 7

Wow, see you did it!!

Amazing

Madhu Saini • Apr 5

*rich

And All Set ;)

I need your help in one of my small project

If you could do :)

Can you fix this issue :- github.com/SH20RAJ/ScrollProgressJ...

okay, let me check.

Can you tell me what's the issue you're facing?

I want the the scroll line progress bar to end when the target element ends in scrolling by default it's on the whole body element height

for example see the website :- sh20raj.com/madhusaini22/how-to-re... ( I created dev.to clone/whatever in NextJS with API )

the line loader should ends with . postcontainer end, and users can set the element using queryselector see the github readme I tried to add the feature it's not a problem btw I just wanted to add one more feature and I think you can do it so contribute here :- github.com/SH20RAJ/ScrollProgressJS

SH20RAJ / ScrollProgressJS

View on GitHub

Let's do rest of chat on discussions :- github.com/SH20RAJ/ScrollProgressJ...

okay, I got your issue now. Let's dicuss on GitHub

Sh Raj • Apr 7

🚀

cedricrgt • Apr 5

Great article but I am surprise. webp is not mentioned for images. It is the format for mobile that should be used. Even more Google recommand to use it for mobile performance.