bigpipe-progress

This module adds a small progress bar in to the page will increment each time a pagelet on your page is fully loaded (all the CSS and JS).

Installation

The module is released in the public npm registry and can be installed by running:

npm install --save bigpipe-progress

In your terminal. The --save flag tells npm to automatically add the installed version to your package.json

Usage

As this is a plugin for the bigpipe framework it can be loaded using the bigpipe.use method as show in the example below:

var BigPipe = require('bigpipe');
var bigpipe = BigPipe.createServer({
  port: 8080
});
 
//
// We can require the module directly and pass it in bigpipe's use method.
//
bigpipe.use('progress', require('bigpipe-progress'));

And that all you need to load in the plugin. Now, the plugin that we load in the page is un-styled but has some special classes that can be used for styling purposes.

We also have an example CSS file in the root of this repository if you want to have some design inspiration. The following class names are set:

• .progressive This className is applies to the parent div element of the progress bar.
• .bar The div within the .progressive element who's width style attribute is increased.

When the progress bar reaches 100% we automatically hide the progress bar.

License

MIT