<progress>

内置浏览器 <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} />

请参阅下面的更多示例。

¥See more examples below.

属性

¥Props

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

¥<progress> supports all common element props.

此外，<progress> 支持这些属性：

¥Additionally, <progress> supports these props:

max：一个号码。指定最大 value。默认为 1。

¥max: A number. Specifies the maximum value. Defaults to 1.
value：0 和 max 之间的数字，或 null 表示不确定的进度。指定完成了多少。

¥value: A number between 0 and max, or null for indeterminate progress. Specifies how much was done.

用法

¥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>