Lightweight Scroll Progress Bar In JavaScript – scrollProgress.js

Preview:

Description:

The scrollProgress.js library allows you to create a scroll bar reflecting how far a user has scrolled down your webpage.

As users scroll through content, the scroll progress bar will dynamically update to show how much of the page has been viewed.

Can be used in blog posts or lengthy articles to significantly improve user experience by providing a clear understanding of reading progress.

How to use it:

1. Install and import the scrollProgress.js library.

# NPM
$ npm i scrollprogress

import ScrollProgress from 'scrollprogress';

<!-- OR -->
<script src="/dist/scrollProgress.js"></script>

2. Create a container to hold the scroll progress bar.

<div class="progress-bar"></div>

3. Initialize the scrollProgress.js.

const progressElement = document.querySelector('.progress-bar');
const progressObserver = new ScrollProgress((x, y) => {
  progressElement.style.width = y * 100 + '%';
});

4. Apply your own CSS styles.

.progress-bar {
  background-color: #DC2626;
  top: 0;
  position: fixed;
  height: 10px;
  left: 0;
}