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

<progress value={0.5} />

Reference

<progress>

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

<progress value={0.5} />

See more examples below.

Props

<progress> supports all common element props.

Additionally, <progress> supports these props:

  • max: A number. Specifies the maximum value. Defaults to 1.
  • value: A number between 0 and max, or null for indeterminate progress. Specifies how much was done.

Usage

Controlling a progress indicator

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.

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} />
    </>
  );
}
Previous<option>
Next<select>