生活情報オンライン

ITエンジニアが役立つ情報を発信します。

progress要素の4つの状態とmeter要素との使い分け

今回の記事ではHTML5プログレスバーのご紹介をします。


プログレスバーは進捗の達成率を表します。Adobeの調査によると使い時は10秒以上かかる長い処理の間に表示するのが適しています。


10秒以上画面が固まるのは退屈ですもんね。
f:id:somegoro:20170912022155j:plain
(個人的には5秒程度でも進捗率のわかるアニメーションを出してほしいですし、自分がWebシステム作るときには出しちゃうと思います。)

progress要素の4つの状態

HTML5では簡単にプログレスバーが実装できるようになりました。
プログレスバーは次の4つの状態が用意されています。
・読み込み中
・最小値
・進行中
・最大値


さっそく表示させていきましょう。あわせてコードも載せていきます。


・読み込み中

<progress></progress>

・最小値

<progress value="0" max="100"></progress>

・進行中

<progress value="50" max="100"></progress>

・最大値

<progress value="100" max="100"></progress>


これらのプログレスバーは進行状況を示す際に使用します。
進捗数値ををvalue属性に指定、最大値をmax属性に最大値を指定します。最小値は記載不要で0になります。


また「進捗数値の取得/設定」および「最大値を取得/設定」は3ステップで実現出来ます。

1.まずはプログレスバーにidを付けます。
<progress id="progress_id" value="0" max="100"></progress>

(classでも要素でも出来ますが、ここではidにします。)


そして、個別に実施したいことを書きます。

2.進捗状況の数値を取得設定
var atai = $("#progress_id").value;
$("#progress_id").value = 70;
3.進捗状況の最大値を取得設定
var atai = $("#progress_id").max;
$("#progress_id").max = 100;


これらは非同期処理を使用することで動的に設定することも出来ます。
上記コードを応用してsetIntervalなどで非同期処理を実装してみます。


上記のソースです。

<progress id="progress_id" value="0" max="100"></progress>

<script>
$(window).on('load', function() {
  var $progress = document.getElementById("progress_id");
  
  var id = setInterval(function(){
    if($progress.value > 99){
      $progress.value = 0;
    }
    $progress.value += 1;
  }, 100);
});
</script>


さて、上記で説明したとおりprogressは進捗状況を表すものであり、電池容量やディスク使用量の表示に使用することは想定されていません。
電池容量やディスク使用量の表示には、meter要素を使いましょう。

meter要素の使い方

meter要素では、progress要素にはなかったバーの色付けをすることが出来ます。
こちらもサンプルを置いておきます。

<meter value="0"   min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="10"  min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="50"  min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="90"  min="0" low="20" optimum="50" high="80" max="100"></meter>

<meter value="100" min="0" low="20" optimum="50" high="80" max="100"></meter>


meter要素もHTML5から新たに追加された要素です。
progress要素との違いは、min属性で最小値を設定。low属性で低いレベルを設定。optimum属性で最適値を設定。high属性で高いレベルを設定です。


以上、HTML5で追加されたオブジェクトの紹介でした。