El componente <progress> integrado en el navegador te permite renderizar un indicador de progreso.

<progress value={0.5} />

Referencia

<progress>

Para mostrar un indicador de progreso, renderiza el componente <progress> incorporado del navegador.

<progress value={0.5} />

Ver más ejemplos abajo.

Props

<progress> admite todas las propiedades comunes de los elementos.

Además, <progress> admite estas propiedades:

  • max: Un número. Especifica el valor máximo. Por defecto es 1.
  • value: Un número entre 0 y max, o null para un progreso indeterminado. Especifica cuánto se ha completado.

Uso

Control de un indicador de progreso

Para mostrar un indicador de progreso, renderiza un componente <progress>. Puedes pasar un valor numérico entre 0 y el valor max que especifiques. Si no pasas un valor max, se asumirá que es 1 por defecto.

Si la operación no está en curso, pasa value={null} para poner el indicador de progreso en un 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} />
    </>
  );
}
Anterior<option>
Siguiente<select>