jQuery カウントアップ型ローディングバーの作成方法 – Count up loading bar

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは!今日のtipsは…【カウントアップ型ローディングバーの作成方法】に関することです。読み込み中の操作に関しましてはwindow.onload~でも実現できるのですが、ローディングの状況に応じた読み込みバーを出したりするには適していません。今回は【こちら】の記事を参考にさせていただきました。

コード

HTML
<div id="loader">
<div id="mask">
<div id="loadArea">
<p id="load-text"></p>
<img src="images/loader_mask.png" id="loadMask">
<div id="barArea">
<div id="bar"></div>
</div><!– close.barArea –>
</div><!– close.loadArea –>
</div>
</div>

<div id="content">
<img src="images/img1.jpg" width="100%" height="100%">
<img src="images/img2.jpg" width="100%" height="100%">
<img src="images/img3.jpg" width="100%" height="100%">
</div>

CSS

#mask{
height:100%;
width:100%;
position:fixed;
background:#000;
}

#load-text,#loadMask,#barArea{
position:absolute; top:50%; left:50%; display: block;
}

#barArea{
height:56px;
width:190px;
margin:-28px 0 0 -95px;
}
#loadMask {
border-right: 50px solid #00A0E9;
border-left: 50px solid #00A0E9;
margin: -90px 0 0 -328px;
padding: 50px 0;
z-index: 10;
}
#bar{
background:url(images/loader_contents.png) center center fixed no-repeat;
height:56px;
}



ローディングバー(画像部分)では[background-position:fixed;]が重要です、この指定を行うことで背景画像の外にあるDIVに対しての横幅指定が可能となっております。

jQuery

<script type="text/javascript">
$(function() {
Array.prototype.remove = function(element) {
for (var i = 0; i < this.length; i++)
if (this[i] == element) this.splice(i,1);
};
function preload(images, progress) {
var total = images.length;
$(images).each(function(){
var src = this;
$(‘<img/>’)
.attr(‘src’, src)
.load(function() {
images.remove(src);
progress(total, total – images.length);
});
});
}
var now_percent = 0;
var displaying_percent= 0;
//読み込みの対象
preload([
‘images/loader_contents.png’,
‘images/loader_mask.png’,
‘images/img1.jpg’,
‘images/img2.jpg’,
‘images/img3.jpg’
], function(total, loaded){
now_percent = Math.ceil(100 * loaded / total);
});
var timer = window.setInterval(function() {
if (displaying_percent >= 100) {
window.clearInterval(timer);
//ローティング終了後に実行
$(‘#load-text’).html(‘loaded..’);
$("#loader").delay(‘1000’).animate({opacity:0,},
{duration:"slow",complete:
function() {
$("#loader").css({"display":"none"});
},
});
} else {
if (displaying_percent < now_percent) {
displaying_percent++;
//ローティング中に実行
$(‘#load-text’).html(displaying_percent);
$(‘#bar’).css(‘width’, displaying_percent + ‘%’);
}
}
},
15);
});
</script>

読み込み完了後、フェードで切り替わるフローへダイレクトに突入するとちょっと混乱するかなぁと思いましたので、完了後1秒間静止するよう指定しています。
 
以上になります。