Common page loading progress bar

Common page loading progress bar wording

• Timer
• By changing the page load progress bar state
• CSS3 small progress bar animation
• Located at the head of the progress bar
• Get real-time progress bar loading data

---

Timer

html code, for example:

 <div class="loading">
  <div class="pic"></div>
</div>

css code page settings give a layer mask, you can put a prompt to load images, for example:

 .loading{position: fixed;width: 100%;height: 100%;background-color: #fff;left:0;top:0;z-index: 100}
.pic{width: 64px;height: 64px;position: absolute;top:0;left:0;bottom: 0;right: 0;margin: auto;background: url(35.gif);}

JS code, a timer is set after 3 seconds loading hidden layer, for example:

 $(function(){
          setInterval(function(){
            $('.loading').fadeOut();
          },3000)
       })

By changing the page load progress bar state

document.onreadystatechange event when the page loads state change,
document.readyState return status of the current document,
uninitialized - has not yet begun loading
loading- Loading
interactive- is loaded, the user can begin interacting with the document
complete- loaded.
So we get the complete state of their pages to load status.
html code and timers as
JS code, as follows:

 document.onreadystatechange = function(){
    if(document.readyState == 'complete'){
        $('.loading').fadeOut();
    }
}

CSS3 small progress bar animation

html code, for example:

 <div class="loading">
  <div class="pic">
   <i></i>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
  </div>
</div> 

css3 style code, as follows:

.pic i{display: block;float: left;width: 5px;height: 50px;background: #4f0;margin:0 2px;transform:scaleY(0.4);-webkit-transform:scaleY(0.4);-webkit-animation:load 1.2s infinite;animation:load 1.2s infinite;}
.pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
@keyframes load{
        0%,40%,100%{transform:scaleY(0.4)}
        20%{transform:scaleY(1);}
    }
@-webkit-keyframes load{
        0%,40%,100%{-webkit-transform:scaleY(0.4)}
        20%{-webkit-transform:scaleY(1);}
    }

js code may also be loaded state by changing the page writing progress bar;

Located at the head of the progress bar

Like most Web pages, as when loading the top of the page there is a loading progress bar from left to right; dynamically change the width of the progress bar finished loading loading hidden layer in the final data.
html code, for example:

 <div class="loading">
  <div class="pic"></div>
</div>
<header>
    <img src="55061.jpg" alt="">
    <img src="8602627166.jpg" alt="">
</header>
<script> 
    $('.pic').animate({width:"20%"},100)
</script>
<section>
    <img src="55061.jpg" alt="">
    <img src="8602627166.jpg" alt="">
</section>
<script>
    $('.pic').animate({width:"50%"},100)
</script>
<footer>
    <img src="5061.jpg" alt="">
    <img src="08602627166.jpg" alt="">
</footer>
<script>
    $('.pic').animate({width:"100%"},100,function(){
        $('.loading').fadeOut();
})
</script>

css style code, as follows:

 .pic{width:0%;height:3px;background:#f00;position:absolute;top:0;left:0;}

Get real-time progress bar loading data

html code, for example:

 <div class="loading">
    <div class="pic">
        <span></span>
        <b>0%</b>
    </div>
</div>

css styles, as follows:

.pic{width: 100px;height: 100px;position: absolute;top:0;left:0;right: 0;bottom: 0;margin: auto;font-size: 24px;text-align: center;line-height:100px;}
.pic span{display: block;width: 80px;height: 80px;position: absolute;top:10px;left:10px;border-radius: 50%;box-shadow: 0 3px 0 #666;-webkit-animation:rotate 1s infinite linear;animation:rotate 1s infinite linear;}
@-webkit-keyframes rotate{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(360deg);}
    }
@keyframes rotate{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }

JS code, as follows:

 $(function(){
        var img = $("img");
        var num = 0;
        img.each(function(i){
            var oImg = new Image();
            oImg.onload = function(){
                oImg.onload=null;
                num++;
                $(".loading b").html(parseInt(num/$("img").size()*100)+"%")
                console.log(parseInt(num/$("img").size()*100)+"%")
                if(num >= i){
                    $(".loading").fadeOut();
                }
            }
            oImg.src=img[i].src;
        })

    })

• About load the dynamic map download, reference here ,
• About the progress of small animation style, the reference here .

---