一般的なページの読み込みプログレスバー文言
- タイマー
- ページロードプログレスバーの状態を変化させることにより、
- CSS3小さなプログレスバーアニメーション
- プログレスバーの先頭に位置します
- リアルタイムプログレスバーロードデータを取得します
タイマー
htmlコード、例えば：
<div class="loading">
<div class="pic"></div>
</div>CSSのコードページの設定は、レイヤーマスクを与え、あなたはたとえば、画像をロードするために、プロンプトを置くことができます。
.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コードは、タイマは3秒には、例えば、中間層をロードした後に設定されます。
$(function(){
setInterval(function(){
$('.loading').fadeOut();
},3000)
})ページロードプログレスバーの状態を変化させることにより、
ページロードの状態変化、document.onreadystatechangeイベント
現在のドキュメントのdocument.readystateでリターン・ステータス、
初期化されていないが-まだロードを開始していない
ローディング-ロード
対話形式がロードされ、ユーザーはドキュメントとの対話を開始することができ
complete-ロードされました。
だから我々は状態をロードするために自分のページの完全な状態を取得します。
などのHTMLコードとタイマー
JSコード、次のように：
document.onreadystatechange = function(){
if(document.readyState == 'complete'){
$('.loading').fadeOut();
}
}CSS3小さなプログレスバーアニメーション
htmlコード、例えば：
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div> CSS3スタイルコード、次のように：
.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のコードは、ページ書き込みプログレスバーを変更して状態をロードすることができます。
プログレスバーの先頭に位置します
ページの上部をロードするときに左から右にロードプログレスバーがあるので、ほとんどのWebページのように、動的プログレスバーの幅を変更するには、最終的なデータでロード隠れ層のロードを終えました。
htmlコード、例えば：
<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スタイルのコード、次のように：
.pic{width:0%;height:3px;background:#f00;position:absolute;top:0;left:0;}リアルタイムプログレスバーロードデータを取得します
htmlコード、例えば：
<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>CSSスタイル、次のように：
.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コード、次のように：
$(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;
})
})