cman.jpWEBページ作成
広告
<progress> 「進捗状況」[読み方：プログレス]
<progress>タグは、タスクの進捗状況をプログレスバーで表示します。
非対応のブラウザのために、<progress>～</progress>内に進捗状況を代替えコンテンツとして記載することが推奨されています。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<progress>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<progress> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ <progress>は不可 | 不可 |
<progress> の属性
【構文】
<progress value="80" max="100">80%</progress>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| value="数値" | タスクの進捗度を示す値 | 「80」 |
| max="数値" | タスクの全体量を示す値 ※デフォルト＝1 | 「100」 |
| グローバル属性 |
| |
| イベント属性 |
| |
<progress>タグのサンプル
確定プログレスバーのサンプル
未確定プログレスバーのサンプル
<p>ダウンロードの進捗：
<progress value="50" max="100">50% </progress>
<progress value="50" max="100">50% </progress>
ダウンロードの進捗：
未確定プログレスバーのサンプル
<p>ダウンロードの進捗：
<progress max="100">待機中</progress>
<progress max="100">待機中</progress>
ダウンロードの進捗：
JavaScriptを使用したサンプル
進捗度に対応してプログレスバーが変化するサンプル
（進捗度をカウントアップしてプログレスバーの動きを表現しています）
（進捗度をカウントアップしてプログレスバーの動きを表現しています）
<script>
function js1(){
// 進捗が100%の場合、0%に戻す
var gage = document.getElementById('prg1');
if (num.value == 100) {
num.value = 0;}
// 関数js2()を100ミリ秒間隔で呼び出す
timer1=setInterval("js2()",100);
}
function js2(){
var bar = document.getElementById('prg1');
var txt = document.getElementById('pct');
// 進捗が100%未満の場合、１ずつカウントアップ
if (bar.value < bar.max) {
bar.value++;
txt.value = bar.value;
} else{
clearInterval(timer1);
}}
</script>
<p>ダウンロードードの進捗：
<progress id="prg1" value="0" max=100">0％</progress>
：<output id="pct">0</output>％</p>
<input type="button" value="ダウンロード開始" onclick="js1()">
function js1(){
// 進捗が100%の場合、0%に戻す
var gage = document.getElementById('prg1');
if (num.value == 100) {
num.value = 0;}
// 関数js2()を100ミリ秒間隔で呼び出す
timer1=setInterval("js2()",100);
}
function js2(){
var bar = document.getElementById('prg1');
var txt = document.getElementById('pct');
// 進捗が100%未満の場合、１ずつカウントアップ
if (bar.value < bar.max) {
bar.value++;
txt.value = bar.value;
} else{
clearInterval(timer1);
}}
</script>
<p>ダウンロードードの進捗：
<progress id="prg1" value="0" max=100">0％</progress>
：<output id="pct">0</output>％</p>
<input type="button" value="ダウンロード開始" onclick="js1()">
ダウンロードードの進捗： ：％
留意事項
| 関連するHTMLタグ | |
|---|---|
| meter | 割合 |
広告