<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="overlay"> <div class="loader"></div> <div id="progstat"></div> <div id="progress"></div> </div> <div id="container"> <img src="http://placehold.it/300x300/cf5"> <img src="http://placehold.it/300x300/f0f"> <img src="http://placehold.it/300x300/fb1"> <img src="http://placehold.it/300x300/ada"> <img src="http://placehold.it/300x300/045"> <img src="http://placehold.it/300x300/b00"> <img src="http://placehold.it/300x3000/41b"> <img src="http://errrrrrrrrrror.it/errorImage"> <img src="http://placehold.it/300x300/098"> <img src="http://placehold.it/300x300/987"> <img src="http://placehold.it/300x300/f25"> <img src="http://placehold.it/300x300/526"> <img src="http://placehold.it/300x300/826"> <img src="http://placehold.it/300x300/ad6"> <img src="http://placehold.it/300x300/74c"> <img src="http://placehold.it/300x300/b40"> <img src="http://placehold.it/300x300/cc7"> <img src="http://placehold.it/300x300/112"> <img src="http://placehold.it/300x300/113"> </div> </div> </div>

*{margin:0;} body{ font: 200 16px/1 Helvetica, Arial, sans-serif; } img{width:32.2%;} #overlay{ position:fixed; z-index:99999; top:0; left:0; bottom:0; right:0; background:rgba(255, 0, 0, 0.9) none repeat scroll 0 0; transition: 1s 0.4s; } #progress{ height:1px; background:#fff; position:absolute; width:0; top:50%; } #progstat{ font-size:0.7em; letter-spacing: 3px; position:absolute; top:50%; margin-top:-40px; width:100%; text-align:center; color:#fff; } .loader { border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid #3498db; width: 60px; height: 60px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; margin:19.3% auto; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

(function(){ function id(v){return document.getElementById(v); } function loadbar() { var ovrl = id("overlay"), prog = id("progress"), stat = id("progstat"), img = document.images, c = 0; tot = img.length; function imgLoaded(){ c += 1; var perc = ((100/tot*c) << 0) +"%"; prog.style.width = perc; stat.innerHTML = ""+ perc; if(c===tot) return doneLoading(); } function doneLoading(){ ovrl.style.opacity = 0; setTimeout(function(){ ovrl.style.display = "none"; }, 1200); } for(var i=0; i<tot; i++) { var tImg = new Image(); tImg.onload = imgLoaded; tImg.onerror = imgLoaded; tImg.src = img[i].src; } } document.addEventListener('DOMContentLoaded', loadbar, false); }());