A tiny, lightweight jQuery plugin that creates scroll progress bar on the page.
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit b923135 Jun 25, 2017
Permalink
Failed to load latest commit information.
src Update prognroll.min.js Jun 24, 2017
License.txt Add files via upload Oct 23, 2016
README.md Update README.md Jun 24, 2017
index.html Update index.html Jun 24, 2017
jquery.3.1.1.min.js Add files via upload Oct 23, 2016
style.css Add files via upload Oct 23, 2016

README.md

PrognRoll

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

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.