備忘録的プログラミングリファレンス

progress タグエレメント

 progress タグエレメントは、進捗状況や進行状況をプログレス表示する HTML タグエレメントです。
 ただし、ブラウザの進捗状況が自動で表示されるプログレスバーではありません。このタグは、例えばファイルの転送やダウンロードの進捗状況を視覚的に表示するために用意されたものです。

progress タグエレメント
<progress max="100" value="60" >進捗状況</progress>
表示例
進捗状況
詳しくは動作の確認を参照してください

 max 属性は指定する必要があります。value 属性のみでは常に 100% として表示されます。
 プログレスバーには、value / max の割合として表示されます。

 属性を指定しない状態では左右にメモリが動くアニメーション表示のみです。進捗状況によって表示を操作するには JavaScript を使用する必要があります。

 数値をゲージとして表示するには progress タグエレメントよりも、<meter>エレメントを使用します。

- ad -

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
value現在値を数値で設定。
max最大値を数値で設定。

動作の確認

 属性を指定しない状態では左右にメモリが動くアニメーション表示のみです。進捗状況によって表示を操作するには JavaScript を使用します。

- ad -