Skip to content

A tiny, lightweight jQuery plugin that creates scroll progress bar for both horizontal and vertical scrolling page

License

Notifications You must be signed in to change notification settings

pravid/prognroll

 
 

Repository files navigation

PrognRoll

A tiny, lightweight jQuery plugin that creates scroll progress bar on the page

Update

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

Install

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>

Usage

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
  });
});

Examples

Body

<body>
<!-- Content -->
</body>
$(function() {
  $("body").prognroll();
});

Body demo on CodePen

Custom div

<div class="box">
<!-- Content -->
</div>
$(function() {
  $(".box").prognroll({
    custom: true
  });
});

Custom div demo on CodePen

Size

0.9 kb minified

License

Licensed under the MIT License.

About

A tiny, lightweight jQuery plugin that creates scroll progress bar for both horizontal and vertical scrolling page

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 65.7%
  • CSS 25.9%
  • JavaScript 8.4%