acb_pagescroll_indicator
v2.0.1
Published
page scroll indicator for websites
Downloads
9
Readme
acb_pagescroll_indicator
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.
Installation
Install it using below command
npm install acb_pagescroll_indicator
Add this in your html file
<div class="scroll-progress" style="--color:#724bd1;--bg-color:#9274db;" id="scroll-progress"></div>
Add This link tag in head section of Your HTML page
use CDN version of CSS
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/acb_pagescroll_style.css">
Add This script tag before ending of Your body tag
use CDN version of JavaScript
<script src="https://unpkg.com/[email protected]/js/acb_pagescroll.js"></script>
Customize the colors
Here in HTML code you can observe "--color" and "--bg-color" css varaiable, You can add your custom colours for it.
Shining Animation
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>