組み込みブラウザの<progress>コンポーネントを使用すると、進捗インジケーターを表示できます。

<progress value={0.5} />

リファレンス

<progress>

進捗インジケーターを表示するには、組み込みブラウザの<progress>コンポーネントをレンダリングします。

<progress value={0.5} />

以下の例も参照してください。

Props

<progress>は、共通の要素propsをすべてサポートしています。

さらに、<progress>は、以下のpropsをサポートしています

  • max: 数値。 valueの最大値を指定します。デフォルトは1です。
  • value: 0とmaxの間の数値、または不定の進捗の場合はnull。完了した量を指定します。

使用法

進捗インジケーターの制御

プログレスインジケーターを表示するには、<progress> コンポーネントをレンダリングします。 value に、0 から指定する max 値までの数値を渡すことができます。max 値を渡さない場合、デフォルトで 1 とみなされます。

操作が進行中でない場合は、プログレスインジケーターを不確定な状態にするために、value={null} を渡します。

export default function App() {
  return (
    <>
      <progress value={0} />
      <progress value={0.5} />
      <progress value={0.7} />
      <progress value={75} max={100} />
      <progress value={1} />
      <progress value={null} />
    </>
  );
}
前へ<option>
次へ<select>