The Page Scroll Indicator is a lightweight JavaScript package designed to enhance user experience by providing a customizable indicator that shows the progress of scrolling on a webpage. This indicator is a visual cue for users, indicating how far they have scrolled and how much content is left to view.
Install it using below command
npm install acb_pagescroll_indicator
<div class="scroll-progress" style="--color:#724bd1;--bg-color:#9274db;" id="scroll-progress"></div>
use CDN version of CSS
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/acb_pagescroll_style.css">
use CDN version of JavaScript
<script src="https://unpkg.com/[email protected]/js/acb_pagescroll.js"></script>
Here in HTML code you can observe "--color" and "--bg-color" css varaiable, You can add your custom colours for it.
Just add an extra class for "scroll-progress", animation class "scroll_acb_animated" like below
<div class="scroll-progress scroll_acb_animated" style="--color:#724bd1;--bg-color:#9274db;" id="scroll-progress"></div>