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:
CDN
Download
Usage
Basic Initialization
To initialize ScrollProgressJS with default settings:
Advanced Configuration
You can also customize the progress bar with your own configurations:
<script>
// Custom initialization
ScrollProgress.init({
color: ‘#ff5722‘, // Progress bar color
height: ‘4px‘, // Progress bar height
position: ‘bottom‘ // Progress bar position (‘top’ or ‘bottom’)
});
</script>
Updating Configuration
After initialization, you can update the configuration:
color: ‘hotpink‘, // Updated color
height: ‘4px‘, // Updated height
position: ‘top‘ // Updated position
});
Destroying the Progress Bar
To remove the ScrollProgressJS and stop listening for scroll events:
Examples
Auto-Initialization
<script src=“https://cdn.jsdelivr.net/gh/SH20RAJ/ScrollProgressJS@main/ScrollProgress.js” data-autoload=“true”></script>
Custom Initialization
<script src=“scrollprogress.js”></script>
<script>
ScrollProgress.init({
color: ‘#007bff‘, // Blue color
height: ‘3px‘, // 3px height
position: ‘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.
Made with ❤️ by SH20RAJ
