A tiny, lightweight jQuery plugin that creates scroll progress bar on the page
Load jQuery and include PrognRoll file
<script src="jquery.js"></script>
<script src="src/prognroll.js"></script>
or use CDN
<link rel="stylesheet" href="https://code.jquery.com/jquery-3.1.1.min.js">
<link rel="stylesheet" href="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js">To see scrolling progress on your page, you need to activate PrognRoll.
$(function() {
$("body").prognroll();
});Thats it! It's active now!
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
position:"top", //Progress bar position can be "top" or "bottom"
custom:false //If you make it true, you can add your custom div and see it's scroll progress on the page
});
});Use body
<body>
<!-- Content -->
</body>$(function() {
$("body").prognroll();
});Use custom div
<div class="box">
<!-- Content -->
</div>$(function() {
$(".box").prognroll({
custom:true
});
});Quick custom div demo on CodePen
1.99 kb
1 kb minified
Licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent