progress.md

title	<progress>

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

<progress value={0.5} />

---

Referencia {/reference/}

<progress> {/progress/}

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

<progress value={0.5} />

Ver más ejemplos abajo.

Props {/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 {/usage/}

Control de un indicador de progreso {/controlling-a-progress-indicator/}

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} />
    </>
  );
}

progress { display: block; }