主要ブラウザで動作
HTMLの表現で進捗度を表すとき、progress要素を使います。ダウンロードの完了度や音楽、ビデオの進行状況を表示するときに多用されています。progress要素は進捗度の他、音量の目盛りなどにも使われます。
ほとんどのブラウザでプログレスバーの長さを設定することができません。上図の中央に示したようにMicrosoft Edgeでは他のブラウザよりも長くなるので、右のように統一した表現をしたいと考え、自前のプログレス表示を作ってみました。
実行例
すでに実行済みであり、再実行にはブラウザのリロードボタンをクリックします。
サンプルコード
親要素に幅、長さ、背景色を指定し子要素のwidthに%を指定するだけです。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prog100 {
margin-top: 2px;
background: palegoldenrod;
width: 160px;
height: 14px;
}
</style>
</head>
<body onload="progressSample();">
<Div class="prog100" style="width:120px;">
<div id="prg0" style="width:0%; height:14px; background:seagreen;"></div>
</Div>
<Div class="prog100" style="width:200px;">
<div id="prg1" style="width:0%; height:14px; background:deepskyblue;"></div>
</Div>
<Div class="prog100" style="width:240px;">
<div id="prg2" style="width:0%; height:14px; background:crimson;"></div>
</Div>
<script type="text/javascript" charset="Shift_JIS">
var percent=0;
function progressSample(){
var p = percent+"%";
console.log("progressSample", p, 20+percent*0.5+"%");
document.getElementById("prg0").style.width = p;
document.getElementById("prg1").style.width = p;
document.getElementById("prg2").style.width = 20+percent*0.5+"%";
if(++percent <= 100) setTimeout(progressSample, 50);
}
</script>
</body>
</html>
苦労話
参考にした例は子要素にimageを使った方法でした。その方法でも期待した結果が得られましたが、プログレスバーの色を変更する場合はその都度、画像を用意しなければならず、上の方法を編み出しました。
参考例ではclass名にmainを使っており、ローカル環境で満足いく動作になり、公開サーバーにアップロードするととんでもない動作になりました。原因は容易にわからずclass名をprog100に変更したら期待した動作になりました。
ブログ画面にはヘッダー画面、ウィジェット画面などがかみ合っています。本画面でないところでmainという要素名を使っているようで、予約語のようなclass名を使う事は避けた方が賢明という体験をしました。