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.
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.
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.
Installation
You can include ScrollProgressJS in your project via CDN or by downloading the script:
You can also customize the progress bar with your own configurations:
<script src="scrollprogress.js"></script><script>// Custom initializationScrollProgress.init({color:'#ff5722',// Progress bar colorheight:'4px',// Progress bar heightposition:'bottom'// Progress bar position ('top' or 'bottom')});</script>
Updating Configuration
After initialization, you can update the configuration:
To remove the ScrollProgressJS and stop listening for scroll events:
ScrollProgress.destroy();
Examples
Auto-Initialization
<!-- Auto-initialize with default settings --><script src="https://cdn.jsdelivr.net/gh/SH20RAJ/ScrollProgressJS@main/ScrollProgress.js"data-autoload="true"></script>
Custom Initialization
<!-- Custom initialization --><script src="scrollprogress.js"></script><script>ScrollProgress.init({color:'#007bff',// Blue colorheight:'3px',// 3px heightposition:'bottom'// Progress bar at the bottom});</script>
Contributing
Contributions are welcome! For major changes, please open an issue first to discuss what you would like to change.
Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin feature/AmazingFeature)
Create a new Pull Request
Please make sure to update tests as appropriate.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgements
Inspired by the need for a simple and customizable scroll progress indicator.
Built with ❤️ and JavaScript.
Contact
For issues, suggestions, or feedback, please create an issue.