內建瀏覽器 <progress> 元件 可讓您渲染進度指示器。

<progress value={0.5} />

參考

<progress>

要顯示進度指示器，請渲染內建瀏覽器 <progress> 元件。

<progress value={0.5} />

請參閱以下更多範例。

屬性

<progress> 支援所有 常用元件屬性。

此外，<progress> 還支援以下屬性：

  • max：一個數字。指定最大 value 值。預設為 1。
  • value：一個介於 0 和 max 之間的數字，或者對於不確定進度，則為 null。指定已完成的數量。

用法

控制進度指示器

要顯示進度指示器，請渲染一個 `` 元件。您可以傳入一個介於 `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} />
    </>
  );
}
上一頁<option>
下一頁<select>