A tiny, lightweight jQuery plugin that creates scroll progress bar on the page
This plugin is customized to support horizontal scrolling progress.
Extra parameter "direction" is added to handle this.
Updated JS file is in new branch "horizontalprogress" in fork https://github.com/pravid/prognroll
JS path: https://raw.githubusercontent.com/pravid/prognroll/horizontalprogress/src/prognroll.js
CDN path: https://cdn.rawgit.com/pravid/prognroll/horizontalprogress/src/prognroll.js
Code sample:
$(".box2").prognroll({
custom: true,
direction: "horizontal"
//or direction: "vertical"
});Demo: https://codepen.io/pravid/pen/VXjNbb
Load jQuery and include PrognRoll file
<script src="jquery.js"></script>
<script src="src/prognroll.js"></script>or use CDN
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>To see scrolling progress on your page, you need to activate PrognRoll.
$(function() {
$("body").prognroll();
});That's it!
You can also customize the progress bar. These are default settings.
$(function() {
$("body").prognroll({
height: 5, //Progress bar height
color: "#50bcb6", //Progress bar background color
custom: false //If you make it true, you can add your custom div and see it's scroll progress on the page
});
});Body
<body>
<!-- Content -->
</body>$(function() {
$("body").prognroll();
});Custom div
<div class="box">
<!-- Content -->
</div>$(function() {
$(".box").prognroll({
custom: true
});
});0.9 kb minified
Licensed under the MIT License.