<progress>
The built-in browser <progress>
component lets you render a progress indicator.
<progressvalue={0.5}/>
Reference
<progress>
To display a progress indicator, render the built-in browser <progress>
component.
<progressvalue={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.
exportdefaultfunctionApp(){return(<><progressvalue={0}/><progressvalue={0.5}/><progressvalue={0.7}/><progressvalue={75}max={100}/><progressvalue={1}/><progressvalue={null}/></>);}