日別アーカイブ: 2019-04-22

プログレス一例

プログラミング

主要ブラウザで動作

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名を使う事は避けた方が賢明という体験をしました。