Bootstrap Snippet Preloader With Bootstrap Progress Bar using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Preloader With Bootstrap Progress Bar"
Bootstrap 3.3.0 Snippet by BlueStrap

Related: See More

Questions / Comments:

"Preloader With Bootstrap Progress Bar" Bootstrap 3.3.0 Snippet by BlueStrap

Related: See More

Questions / Comments:

"Preloader With Bootstrap Progress Bar"
Bootstrap 3.3.0 Snippet by BlueStrap