ブラウザ組み込みの <progress> コンポーネントを利用することで、進行状況のインジケータをレンダーすることができます。

<progress value={0.5} />

リファレンス

<progress>

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

<progress value={0.5} />

さらに例を見る

props

<progress> は一般的な要素の props をすべてサポートしています。

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

  • max： 数値。value の最大値を指定します。デフォルトは 1 です。
  • value： 0 から max までの数値、または進行状況が不定 (indeterminate) であることを表す null。完了した量を指定します。

使用法

進行状況のインジケータの制御

進行状況のインジケータを表示するためには、<progress> コンポーネントをレンダーします。0 から max 値までの数値を value として渡すことができます。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} />
    </>
  );
}
Previous<option>
Next<select>