<progress>
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} />
Props
<progress> supports all common element props.
Additionally, <progress> supports these props:
max: A number. Specifies the maximumvalue. Defaults to1.value: A number between0andmax, ornullfor 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} />
</>
);
}