A jquery plugin that creates stylable progress bars based on scroll position.
npm install content-progress``javascript`
$(document).ready(function(){
$('body').contentProgress({
//defaults
type: 'bar', //you can specify either frame or bar.
wrapper: '', //the wrapper for the progress bars
attr: {
class: 'content-progress' // the class name of the progress bar container
},
onComplete: function() {
// callback when user reaches end of page or content
},
fromComplete: function() {
// callback when user scrolls back from end of page
}
});
});
#Dependencies
jQuery & jquery-transit
`
npm install content-progress
To use, just include the contentProgress.js and css to your page.
The appearance of the progressbars can be styled via css (bar thickness, color, etc.).
Please take note container paddings to account for the thickness of your progressbars. Progress bars are highly customisable via CSS, you can basically do anything with it! Thickness, background, colors, positioning, go wild!
If you decide to change the classname, please change the css accordingly.
`javascript``
$(document).ready(function(){
$('body').contentProgress({
type: 'bar'
});
});
Please see the demo!