<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 ----------> <!-- Preloader with Bootstrap Progress Bar --> <div class='loader'> <div class='loader-container'> <h3><b>Please wait a moment while we are preparing the content !</b></h3> <div class='progress progress-striped active'> <div class='progress-bar progress-bar-color' id='bar' role='progressbar' style='width: 0%;'></div> </div> </div> </div> <!-- Landing Page --> <div class="container-full"> <div class="row"> <div class="col-lg-12 text-center v-center"> <h1>Hello this is Landing Page</h1> <p>You just see a progress bar</p> <h1>Try to load HD Image below</h1> <br><br><br> <br><br><br> </div> </div> <!-- /row --> <div> <img src="http://p1.pichost.me/i/9/1320769.jpg"/> </div> </div> <br><br><br><br><br> </div>

/* Landing Page */ .container-full { margin: 0 auto; width: 100%; min-height:100%; background: url('http://www.desktopwallpaperhd.net/wallpapers/7/6/background-homepage-web-wood-opera-media-images-79414.jpg'); color:#eee; overflow:hidden; } /* Preloader with Bootstrap Progress Bar -----------------------------------------------*/ .loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; background: url('https://6ed03b3e7ee716b29bc2dee79aafb8179ed53b19-www.googledrive.com/host/0B9VLbslO6g64UnFTUlQzWDVMdXM') 50% 50% no-repeat rgb(249,249,249); } .loader-container { width: 600px; height: 200px; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; }

var progress = setInterval(function () { var $bar = $("#bar"); if ($bar.width() >= 600) { clearInterval(progress); } else { $bar.width($bar.width() + 60); } $bar.text($bar.width() / 6 + "%"); if ($bar.width() / 6 == 100){ $bar.text("Still working ... " + $bar.width() / 6 + "%"); } }, 800); $(window).load(function() { $("#bar").width(600); $(".loader").fadeOut(3000); });