Page Load Progress Bar

Display the progress bar on page load

HTML

<link rel="stylesheet" href="http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/nprogress/nprogress.css">
<script src="http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/nprogress/nprogress.js"></script>
<link rel="stylesheet" href="http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/css/style.css">
<h1>Gallery Progress Bar</h1>
<div id="main"></div>
<a href="#" id="loadMore">Load More</a>

JavaScript

(function($){
	$.fn.showImage = function(src, deferred){
		img.load(function(){
			deferred.always(function(){

				elem.trigger('image-loaded');
            img.hide().appendTo(holder).delay(100).fadeIn('fast',       function(){
					result.resolve()
				});
			});

		});

		img.attr('src', src);

		// Return the deferred (it has not been resolved at this point)
		return result;
	} 


	// An array with photos to show on the page. In a normal web app
	// you would fetch this array from your server with AJAX.

	var photos =...