<progress>
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} />
Props
<progress>
suporta todas as props comuns dos elementos.
Adicionalmente, <progress>
suporta estas props:
max
: Um número. Especifica ovalue
máximo. Seu valor padrão é1
.value
: Um número entre0
emax
, ounull
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} /> </> ); }