La Etiqueta PROGRESS

Se utiliza para representar el progreso de una tarea, como la carga de un archivo, la finalización de un formulario o cualquier proceso que requiera mostrar avance en tiempo real.

La etiqueta <progress> en HTML se utiliza para representar el progreso de una tarea, como la carga de un archivo, la finalización de un formulario o cualquier proceso que requiera mostrar avance en tiempo real. A diferencia de <meter> (que indica un valor dentro de un rango estático), <progress> está diseñado específicamente para tareas dinámicas. A continuación, te enseñamos cómo usarla.

Sintaxis básica

La estructura básica es:

<progress value="valor_actual" max="valor_máximo"></progress>

  • value: Indica el progreso actual (número).

  • max: Define el valor total requerido para completar la tarea (por defecto es 1).

Ejemplo 1: Progreso del 50%

<progress value="50" max="100"></progress>

Ejemplo 2: Progreso indeterminado

Si la tarea no tiene un avance medible (ejemplo: carga sin tiempo estimado), omite el atributo value:

<progress max="100"></progress>

El navegador mostrará una animación de carga

Personalización con CSS

Puedes modificar el estilo del indicador de progreso usando selectores específicos:

/* Estilo del contenedor */
progress {
  width: 300px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Barra de progreso (WebKit: Chrome, Safari) */
progress::-webkit-progress-value {
  background: #4CAF50;
  border-radius: 5px;
}

progress::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 5px;
}

/* Firefox */
progress::-moz-progress-bar {
  background: #4CAF50;
  border-radius: 5px;
}

Actualización dinámica con JavaScript

Para actualizar el valor de <progress> en tiempo real (ejemplo: subida de archivos):

<progress id="miProgreso" value="0" max="100"></progress>
<button onclick="avanzar()">Avanzar +10%</button>

<script>
  function avanzar() {
    const progreso = document.getElementById("miProgreso");
    if (progreso.value < 100) {
      progreso.value += 10;
    }
  }
</script>

Clic en el botón aumentará el progreso en 10%.

Casos de uso comunes

Carga de archivos

<input type="file" id="archivo">
<progress id="progresoCarga" value="0" max="100"></progress>

<script>
  document.getElementById("archivo").addEventListener("change", function(e) {
    const archivo = e.target.files[0];
    const progreso = document.getElementById("progresoCarga");
    // Simulación de carga (puedes reemplazar con una llamada real a una API)
    let valor = 0;
    const intervalo = setInterval(() => {
      valor += 10;
      progreso.value = valor;
      if (valor >= 100) clearInterval(intervalo);
    }, 500);
  });
</script>

Progreso de un cuestionario

<p>Pregunta 1 de 5</p>
<progress value="1" max="5"></progress>

Accesibilidad

Añade etiquetas descriptivas para usuarios con lectores de pantalla:

<label for="progreso">Progreso de la instalación: </label>
<progress id="progreso" value="75" max="100">75% completado</progress>

El texto dentro de la etiqueta (75% completado) solo se muestra si el navegador no soporta <progress>.

Diferencias entre <progress> y <meter>

  • <progress>: Tareas en curso con un inicio y un final (ejemplo: descarga).

  • <meter>: Valores estáticos dentro de un rango (ejemplo: uso de almacenamiento: <meter value="30" min="0" max="100"></meter>).

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <style>
    progress {
      width: 300px;
      margin: 10px 0;
    }
    progress::-webkit-progress-value {
      background: #007bff;
    }
  </style>
</head>
<body>
  <h2>Instalación de software</h2>
  <progress id="progresoInstalacion" value="0" max="100"></progress>
  <button onclick="simularInstalacion()">Iniciar instalación</button>

  <script>
    function simularInstalacion() {
      const progreso = document.getElementById("progresoInstalacion");
      let valor = 0;
      const intervalo = setInterval(() => {
        valor += 5;
        progreso.value = valor;
        if (valor >= 100) {
          clearInterval(intervalo);
          alert("¡Instalación completada!");
        }
      }, 500);
    }
  </script>
</body>
</html>

Conclusión

La etiqueta <progress> es una herramienta esencial para crear interfaces intuitivas que muestren el avance de tareas. Combínala con CSS y JavaScript para adaptarla a tus necesidades, y siempre prioriza la accesibilidad. ¡Ahora estás listo para implementar barras de progreso efectivas en tus proyectos web!