Riferimento API
React DOM Components

<progress>

Nota bene

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un’ulteriore revisione da parte della community sarebbe comunque utile. Migliora questa traduzione.

Il componente browser integrato <progress> ti permette di renderizzare un indicatore di progresso.

<progress value={0.5} />

Reference

<progress>

Per visualizzare un indicatore di progresso, renderizza il componente browser integrato <progress>.

<progress value={0.5} />

Vedi altri esempi sotto.

Props

<progress> supporta tutte le props comuni degli elementi.

Inoltre, <progress> supporta queste props:

  • max: Un numero. Specifica il value massimo. Predefinito: 1.
  • value: Un numero compreso tra 0 e max, oppure null per un progresso indeterminato. Specifica quanto è stato completato.

Usage

Controllare un indicatore di progresso

Per visualizzare un indicatore di progresso, renderizza un componente <progress>. Puoi passare un numero value compreso tra 0 e il valore di max che specifichi. Se non passi un valore max, viene assunto 1 per impostazione predefinita.

Se l’operazione non è in corso, passa value={null} per mettere l’indicatore di progresso in uno stato indeterminato.

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>