<progress>

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

<progress value={0.5} />

参考

<progress>

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

<progress value={0.5} />

参见下面的更多示例。

属性

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

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

  • max:一个数字。指定最大value。默认为1
  • value:介于0max之间的数字,或用于不确定进度。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} />
    </>
  );
}