HTML => 進行要素

パラメーター

パラメータ	値
最大	タスクが必要とする作業量の合計
値	どのくらいの仕事がすでに達成されているか
ポジション	この属性は、 `<progress>`要素の現在の位置を返します
ラベル	この属性は、 `<progress>`要素ラベルのリストを返します（存在する場合）

備考

<progress>要素は、Internet Explorerのバージョンが10未満ではサポートされていません

<progress>要素は、タスクの進捗ではなく、ゲージである何かに使用される間違った要素です。たとえば、 <progress>要素を使用してディスク領域の使用を示すことは不適切です。代わりに、 <meter>要素はこのタイプのユースケースで使用できます。

進捗

<progress>要素はHTML5では新しく、タスクの進行状況を表すために使用されます

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

これにより、バーが22％

プログレスバーの色を変更する

プログレスバーは、 progress[value]セレクタでスタイリングすることができます。

この例では、幅250px 、高さ20pxプログレスバーが表示され20px

progress[value] {
  width: 250px;
  height: 20px;
}

プログレスバーは特にスタイルを設定するのが難しい場合があります。

Chrome / Safari / Opera

これらのブラウザでは、 -webkit-appearanceセレクタを使用して進行タグのスタイルを設定します。これを無効にするには、外観をリセットすることができます。

progress[value] {
  -webkit-appearance: none;
  appearance: none;
}

さて、コンテナ自体をスタイルすることができます

progress[value]::-webkit-progress-bar {
  background-color: "green";
}

Firefox

Firefoxでは、プログレスバーのスタイルが若干異なります。これらのスタイルを使用する必要があります

progress[value] {
  -moz-appearance: none;
  appearance: none;
  border: none;                /* Firefox also renders a border */
}

インターネットエクスプローラ

Internet Explorer 10以降では、 progress要素がサポートされています。ただし、 background-colorプロパティはサポートされていません。代わりにcolorプロパティを使用する必要があります。

progress[value]  {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  border: none;                       /* Remove border from Firefox */

  width: 250px;
  height: 20px;

  color: blue; 
}

HTMLフォールバック

progress要素をサポートしていないブラウザでは、これを回避策として使用できます。

<progress max="100" value="20">
    <div class="progress-bar">
        <span style="width: 20%;">Progress: 20%</span>
    </div>
</progress>

progressタグをサポートしているブラウザは、内部に入れ子になっているdivを無視します。進捗タグを特定できない従来のブラウザでは、代わりにdivがレンダリングされます。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

HTML
進行要素

サーチ…