Scribd
Upload
11 views4 pages

Progress - React

The document provides an overview of the built-in browser <progress> component in React, which is used to render a progress indicator. It details the usage of the component, including how to set the value and maximum value for the progress, as well as how to indicate an indeterminate state. Additionally, it includes example code demonstrating the component's implementation.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views4 pages

Progress - React

The document provides an overview of the built-in browser <progress> component in React, which is used to render a progress indicator. It details the usage of the component, including how to set the value and maximum value for the progress, as well as how to indicate an indeterminate state. Additionally, it includes example code demonstrating the component's implementation.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

20/02/2025, 18:27 <progress> – React

v19

API REFERENCE COMPONENTS

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

<progress value={0.5} />

Reference

<progress>

Usage

Controlling a progress indicator

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.

https://react.dev/reference/react-dom/components/progress 1/4
20/02/2025, 18:27 <progress> – React

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.

App.js Download Reset

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} />
</>
);
}

https://react.dev/reference/react-dom/components/progress 2/4
20/02/2025, 18:27 <progress> – React

PREVIOUS

<option>

NEXT

<select>

Copyright © Meta Platforms, Inc

uwu?

Learn React API Reference

Quick Start React APIs

Installation React DOM APIs

Describing the UI

Adding Interactivity

Managing State

Escape Hatches

Community More

https://react.dev/reference/react-dom/components/progress 3/4
20/02/2025, 18:27 <progress> – React

Code of Conduct Blog

Meet the Team React Native

Docs Contributors Privacy

Acknowledgements Terms

https://react.dev/reference/react-dom/components/progress 4/4

You might also like