<progress>
ブラウザ組み込みの <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} /> </> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]