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

🌐 The built-in browser <progress> component lets you render a progress indicator.

<progress value={0.5} />

参考

🌐 Reference

<progress>

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

🌐 To display a progress indicator, render the built-in browser <progress> component.

<progress value={0.5} />

查看更多示例。

属性

🌐 Props

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

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

🌐 Additionally, <progress> supports these props:

  • max：一个数字。指定最大 value。默认值为 1。
  • value：一个介于 0 和 max 之间的数字，或者使用 null 表示进度不确定。指定已经完成的量。

用法

🌐 Usage

控制进度指示器

🌐 Controlling a progress indicator

要显示进度指示器，请渲染一个 <progress> 组件。你可以传递一个介于 0 和你指定的 max 值之间的数字 value。如果你没有传递 max 值，则默认会假定为 1。

🌐 To display a progress indicator, render a <progress> component. You can pass a number value between 0 and the max value you specify. If you don’t pass a max value, it will assumed to be 1 by default.

如果操作未进行，将 value={null} 传递以将进度指示器置于不确定状态。

🌐 If the operation is not ongoing, pass value={null} to put the progress indicator into an indeterminate state.

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>