HTML Living Standard/progress

progress 要素

<progress> 要素は、HTML Living Standardにおいて、ユーザーに進行状況を視覚的に表示するための要素です。通常、この要素は、時間や作業の進捗を示すバー（プログレスバー）として使用されます。特にファイルのアップロード、ダウンロード、または処理の進行状況を表示する際に役立ちます。

定義

<progress> 要素は、リソースの処理の進行度を示すために使用されます。視覚的に進行状況を表示するために、プログレスバーがレンダリングされます。この要素には、進行状況を示すための属性がいくつか存在し、進行度を指定するために数値を設定することができます。

属性

<progress> 要素は主に以下の2つの属性を使用して、進行状況を管理します。

value: 現在の進行状況を示す数値を設定します。この数値は、min と max の範囲内で指定され、進行状況の割合を示します。
max: 進行状況の最大値を設定します。デフォルト値は100です。

構文

<progress> 要素の基本的な構文は以下のようになります。

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

この例では、進行状況が50%であることを示すプログレスバーを作成します。value="50" は進行状況を50%に設定し、max="100" は最大値が100であることを示します。

進行状況の表示

<progress> 要素は、進行状況を示すプログレスバーを表示しますが、ブラウザがそれに対応していない場合、デフォルトではテキスト（例えば "50%"）が表示されることがあります。このテキストは、視覚的な表示がサポートされていない環境において、ユーザーに進行状況を伝えるために使用されます。

例えば、以下のコードは、進行状況が50%であるプログレスバーを表示します。

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

この例では、<progress> 要素の中に "50%" というテキストが記述されていますが、ブラウザが進行状況バーをサポートしている場合、このテキストは表示されず、代わりに視覚的なバーが表示されます。

例

以下は、<progress> 要素を使用してファイルのアップロード進行状況を表示する例です。

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

この例では、進行状況がまだ0%の状態で、ファイルアップロードが始まると、進行状況を反映するためにvalue属性が変更されます。JavaScriptを使ってリアルタイムで進行状況を更新できます。

<script>
  function updateProgress(value) {
    var progress = document.getElementById('fileProgress');
    progress.value = value;
  }

  // 例えば、ファイルの読み込みやアップロード処理で進行状況を更新
  setInterval(function() {
    updateProgress(Math.min(progress.value + 5, 100));
  }, 1000);
</script>

このスクリプトは、1秒ごとに進行状況を5%ずつ増加させ、最大100%まで進めます。

使用例

以下は、進行状況が0%から100%まで変化するプログレスバーを作成する例です。

<progress id="taskProgress" value="0" max="100"> 0% </progress>

<script>
  var progressBar = document.getElementById('taskProgress');
  var value = 0;

  setInterval(function() {
    if (value < 100) {
      value += 10;
      progressBar.value = value;
    }
  }, 1000);
</script>

このコードでは、<progress> 要素の進行状況が毎秒10%増加し、最終的に100%になります。

CSSによるスタイリング

<progress> 要素は、通常はブラウザによってスタイルが自動的に設定されますが、CSSを使ってカスタマイズすることも可能です。以下の例では、進行状況の色やサイズを変更する方法を示しています。

<style>
  progress {
    width: 100%;
    height: 20px;
  }

  progress[value] {
    background-color: lightgray;
    border-radius: 10px;
  }

  progress[value]::-webkit-progress-bar {
    background-color: lightgray;
    border-radius: 10px;
  }

  progress[value]::-webkit-progress-value {
    background-color: green;
    border-radius: 10px;
  }
</style>

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

このCSSでは、<progress> 要素のバーの背景色や進行状況を示す部分の色を変更し、スタイルをカスタマイズしています。

HTML Living Standard/progress

progress 要素

定義

属性

構文

進行状況の表示

例

使用例

CSSによるスタイリング

関連項目

関連仕様