Show A Loading Indicator For Long Running Processes

We have all been on a page where the command we started is taking waaaaaaay longer than we expected. This is the eternal conundrum. Do I stop the page loading or wait? In my opinion, users should never be confronted with this problem. As developers, we should try to give as much feedback as possible.

One way to do this is by using loading indicators (or progress bars). A loading indicator will let the user know how much time the process is expected to take so they are not left wondering. They know there is 3 minutes remaining, so they can go and grab that coffee they have been thinking about for the last 2 hours.

There are many options for developers, and one that I found recently is very appealing. It is along the lines of the loading indicator used by YouTube when loading a new video. This is a javascript library called Nanobar.js. Nanobar.js gives you control over the state of the loading bar and also the style of it. Here is a snippet of code used to initialise and use this component.

var options = {
	bg: '#acf',

	// leave target blank for global nanobar
	target: document.getElementById('myDivId'),

	// id for new nanobar
	id: 'mynano'
};

var nanobar = new Nanobar( options );

// move bar
nanobar.go( 30 ); // size bar 30%

// Finish progress bar
nanobar.go(100);

And it's that simple. There are many more options like LoadingBar.js. The demo for this library shows how to incorporate a loading indicator for an AJAX call which is very useful.

Til next time ...