<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 between0
andmax
, ornull
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} /> </> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]