内置浏览器 <progress> 组件 允许你渲染进度指示器。

<progress value={0.5} />

参考

<progress>

要显示进度指示器，请渲染 内置浏览器 <progress> 组件。

<progress value={0.5} />

请参阅以下更多示例。

属性 <progress> 支持所有 通用元素属性。

此外，<progress> 支持以下属性

  • max: 一个数字。指定最大 value。默认为 1。
  • value: 一个介于 0 和 max 之间的数字，或 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>