O componente <progress> nativo do navegador permite que você renderize um indicador de progresso.

<progress value={0.5} />

Referência

<progress>

Para exibir um indicador de progresso, renderize o componente <progress> nativo do navegador.

<progress value={0.5} />

Veja mais exemplos abaixo.

Props

<progress> suporta todas as props comuns dos elementos.

Adicionalmente, <progress> suporta estas props:

  • max: Um número. Especifica o value máximo. Seu valor padrão é 1.
  • value: Um número entre 0 e max, ou null para progresso indeterminado. Especifica o quanto foi feito.

Uso

Controlando um indicador de progresso

Para exibir um indicador de progresso, renderize um componente <progress>. Você pode passar value, um número entre 0 e o valor max por você especificado. Se você não passar um valor max, o padrão usado será 1.

Se a operação não estiver ocorrendo, passe value={null} para colocar o indicador de progresso em um estado indeterminado.

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>