HTML progress: mostrar el avance y cambiar al estado indeterminado

HTML <progress> muestra cuánto se ha completado de una tarea. Define value y max para un progreso determinado, u omite el atributo value cuando se desconozca el trabajo total. El elemento no mide automáticamente las subidas ni las descargas.

Calcule el progreso con valor y máximo

el valor es la cantidad completada y max es la cantidad total. Un valor de 20 con max 100 significa 20%; con max 200 significa 10%. Cuando se omite max, su valor predeterminado es 1, por lo que 20% se escribe como value="0.2". Use un número válido mayor que cero para max y un valor entre cero y max.

El mínimo siempre es cero; progress no utiliza un atributo min. Considere usar meter para una medición dentro de un rango, como uso de almacenamiento o una puntuación. Use progress para el cumplimiento de una tarea en curso.

Ejemplo completo: actualizar el progreso y cambiar a indeterminado

Guarde este código como progress-demo.html y ábralo en un navegador. Los botones solo cambian los valores mostrados para practicar; no transfieren archivos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Progreso y estado indeterminado</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>Práctica de progreso</h1>
  <label for="work">Progreso de la tarea de ejemplo</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20% completado</p>
  <button type="button" id="advance">Cambiar al 80%</button>
  <button type="button" id="unknown">Total desconocido</button>
  <button type="button" id="reset">Restablecer</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = 'En curso';
        status.textContent = 'En curso: se desconoce la cantidad total de trabajo.';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '% completado';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. El estado inicial está al 20% de completado. Haga clic en Cambiar al 80% para cambiar tanto la barra como su descripción al 80%.
2. Haga clic en Total desconocido para eliminar el atributo value. El navegador muestra un progreso indeterminado junto con una oración que explica que el total es desconocido.
3. Haga clic en Restablecer para restaurar el atributo value y volver al 20%.

value="0" es progreso determinado sin trabajo completado; no es indeterminado. Para cambiar un elemento de progreso existente a indeterminado, elimine el atributo como lo hace el ejemplo. La apariencia y animación del progreso indeterminado puede variar según el navegador, el sistema operativo y la configuración del usuario.

Proporcione un nombre de tarea y una oración de estado

El texto “20%” dentro del progreso es un texto de respaldo para navegadores antiguos, no un sustituto del nombre de la tarea. Asocia una etiqueta usando valores coincidentes de for e id, o proporciona un nombre accesible apropiado ARIA, para identificar la tarea. Muestra el estado actual tanto en palabras como a través del color y la longitud de la barra.

Para tareas reales, actualiza el valor a partir de la información proporcionada por un servidor o por eventos de transferencia. Llenar una barra con un temporizador no establece que el trabajo esté completo. Diseña mensajes y acciones separados para errores, cancelaciones y finalización, y controla la frecuencia de los anuncios para que las actualizaciones de estado no se repitan en exceso. La referencia MDN de progreso explica la sintaxis y los requisitos de accesibilidad.