Vertical Gradient Scroll Progress Bar In jQuery And CSS
File Size: | 7.62 KB |
---|---|
Views Total: | 2031 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a small script that helps you generate a vertical gradient reading progress indicator to replace the native browser scrollbar.
How to use it:
How to use it:
1. Create an empty DIV container to hold the scroll progress bar.
<div id="progressbar"></div>
2. Hide the native browser scrollbar.
::-webkit-scrollbar { width: 0; }
3. Style the scroll progress indicator.
#progressbar { position: fixed; top: 0; right: 0; width: 15px; border-radius: 10px; background: linear-gradient(to top, #fcb045, #fd1d1d, #833ab4); }
4. Include the necessary jQuery JavaScript library (slim build) at the bottom of the web page.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"> </script>
5. The main JavaScript (jQuery) script to update the progress bar on page scroll.
$(window).scroll(function() { var scroll = $(window).scrollTop(), dh = $(document).height(), wh = $(window).height(); scrollPercent = (scroll / (dh - wh)) * 100; $("#progressbar").css("height", scrollPercent + "%"); });
This awesome jQuery plugin is developed by veeteefunk. For more Advanced Usages, please check the demo page or visit the official website.