PrognRoll
A tiny, lightweight jQuery plugin that creates scroll progress bar on the page
Install
- Load jQuery and include PrognRoll file
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://raw.githack.com/mburakerman/prognroll/master/src/prognroll.min.js"></script>- npm install
pnpm i @cherrol/prognroll -S
# npm i @cherrol/prognroll -S
# yarn add @cherrol/prognroll -SUsage
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();
});Custom div
<div class="box">
<!-- Content -->
</div>$(function() {
$(".box").prognroll({
custom: true
});
});Size
1 kb minified
License
Licensed under the MIT License.