Bootstrap Loading Bar images

Bootstrap Loading Bar images

by Andrew Pougher

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="loading_bar"><div id="loader"></div></div>
  
   <div class="progress progress-striped active">
  <div class="bar" style="width: 0%;"></div>
</div>


<p id="load_status"></p>
<div id="gallery"></div>

CSS

body{margin:100px} 
.popSourceBlock {
        display:none;
    }

JavaScript

var images = [
'http://naturelap.files.wordpress.com/2010/02/mystic-nature.jpg',
  'http://naturelap.files.wordpress.com/2010/02/mystic-nature.jpg',
  'http://naturelap.files.wordpress.com/2010/02/mystic-nature.jpg',
  'http://naturelap.files.wordpress.com/2010/02/mystic-nature.jpg',
  'http://naturelap.files.wordpress.com/2010/02/mystic-nature.jpg',
  'http://naturelap.files.wordpress.com/2010/02/mystic-nature.jpg',
'http://www.wallpaper-valley.com/nature/wallpaper/Art_Nature.jpg',
'http://crispme.com/wp-content/uploads/Nature-33.jpg'
];

var imagesN = images.length;

var i = 0;

var img = new Image();
img.onload = (function(){
	for ( i = 0; i < imagesN; ++i ){
		$('#gallery').append('<img src="'+images[i]+'">');	 
	}
})(i); 

var c = 0;
$("#gallery img").load(function(i){
	c++;
	var status = c*(100/imagesN)+'%';
	$("#load_status").html(status);	
    $('.bar').attr('style','width:'+status);
	$('#loader').stop().animate({width: status},300);
	if (c === imagesN){
		$("#gallery").fadeIn(700);
		$('#load_status, .progress').fadeOut();
	}
});