Content Progress Bars

A Work in Progress* A jQuery plugin that creates a progress bar/frame based on a user's scroll position.

Frame Demo

Bar Demo

Options

You can customise the following settings

$(document).ready(function(){
	$('body').contentProgress({ 
		//defaults
		type: 'bar', //you can specify either frame or bar.
		wrapper: '<div />', //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

Usage

install via npm

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.

$(document).ready(function(){
	$('body').contentProgress({ 
		type: 'bar'
	});
});

Please see the demo!