Socket
Socket
Sign inDemoInstall

content-progress

Package Overview
Dependencies
2
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

content-progress

A jquery plugin that creates stylable progress bars based on scroll position.


Version published
Maintainers
1
Weekly downloads
1
decreased by-83.33%

Weekly downloads

Readme

Source

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!

Keywords

FAQs

Last updated on 29 Feb 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc