HTML5 進捗状況を表示するプログレスバーを使ってみる
HTML5から作業の進捗状況を表示するのが簡単なプログレスバーのタグが実装されました。
プログレスバーの説明と使い方の紹介を致します。
下記はサンプルです。1秒間に1%ずつ上がっていきます。
Progress: （1）%
サンプルコード1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <p> Progress: <progress value="0" id="p" max=100></progress> （<span id="pv" style="color:#00b200">0</span>）%</p><script> // オブジェクトの取得 var progressBar = document.getElementById('p'); var progressValue = document.getElementById('pv'); // プログレスバーの値を増やす function updateProgress(newValue) { if(newValue > 100){ return; } progressBar.value = newValue; progressValue.innerHTML = newValue; // 1秒後に1増やして実行 setTimeout(function(){updateProgress(newValue+1);}, 1000); }updateProgress(0);</script> |
使用するタグ
属性
| 属性 | 値 |
|---|---|
| value | 完了した量を表す。 デフォルトは0.0〜1.0。 0以上の値のみ。 設定されてない場合は未定義となる。 |
| max | 全体の作業量。 デフォルトは1。 0以上の値のみ |
| form | 関連付けるform要素に指定したID名 |
これだけで簡単に使用が可能です。
プログレスバーってかっこいいけどjQueryとかでわざわざ設定するのは面倒だったのでHTML5で実装されてありがたいです。
サンプル表示
1 2 3 4 | <p><progress value="0" max="100">0%</progress> （0%）</p><p><progress value="30" max="100">30%</progress> （30%）</p><p><progress value="100" max="100">100%</progress> （100%）</p><p><progress>待機中</progress> （未確定）</p> |
（0%）
（30%）
（100%）
（未確定）
関連記事
No Responses