<progress>

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

<progress value={0.5} />

Referência
- <progress>
Uso
- Controlando um indicador de progresso

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.

Fork

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>