HTML progress

La etiqueta <progress> en HTML5 se utiliza para mostrar el progreso de una tarea, ya sea en forma de barra de progreso o de un porcentaje. La barra de progreso se puede mostrar de forma horizontal o vertical dependiendo de cómo se estructure el código.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <progress> en HTML5 podría ser una barra de progreso que muestra el progreso de una descarga.

<p>Download Progress:</p>
<progress id="downloadProgress" value="75" max="100"></progress>
<br>
<label for="downloadProgress">75%</label>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se crea una barra de progreso con un valor actual de 75 y un valor máximo de 100. También se utiliza una etiqueta para describir el estado de la barra de progreso. El id “downloadProgress” es utilizado para identificar de manera única el elemento <progress>.

También se puede utilizar JavaScript para actualizar dinámicamente el valor de la barra de progreso mientras se lleva a cabo la descarga.

var progressBar = document.getElementById("downloadProgress");
var downloadPercent = 75;

// Simular la descarga
var downloadTimer = setInterval(function(){
  downloadPercent += 1;
  progressBar.value = downloadPercent;
  if(downloadPercent === 100){
    clearInterval(downloadTimer);
  }
}, 50);

Lenguaje del código: JavaScript (javascript)

En este ejemplo se utiliza javascript para actualizar el valor de la barra de progreso cada 50 milisegundos, simulando una descarga y al llegar al 100% se detiene el proceso.

Atributos

Los atributos importantes de la etiqueta <progress> en HTML son:

• value: Este atributo indica el valor actual del progreso. El valor debe ser un número entero y no puede ser mayor que el valor especificado en el atributo max.

• max: Este atributo indica el valor máximo del progreso. El valor debe ser un número entero y no puede ser menor que el valor especificado en el atributo value.

• form: Este atributo permite que la barra de progreso sea controlada por un formulario. El valor debe ser el ID del formulario al que se va a vincular la barra de progreso.

• id: Este atributo permite identificar de manera única el elemento <progress> en el documento.

Más ejemplos:

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

Lenguaje del código: HTML, XML (xml)

En este ejemplo, el progreso actual es de 35/100 o 35%.

También se puede agregar contenido dentro de la etiqueta <progress> para mostrar el porcentaje de progreso en un formato legible para el usuario.

Ejemplo:

<progress value="35" max="100">35%</progress>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se muestra el progreso de 35/100 o 35% en el interior de la etiqueta <progress>

Ejemplo con atributo id y form:

<form id="form1">
  <progress id="fileUpload" value="35" max="100" form="form1"></progress>
  <br>
  <label for="fileUpload">Upload Progress: 35%</label>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, el progreso actual es de 35/100 o 35% y está vinculado al formulario con ID “form1”. Además, tiene un identificador único “fileUpload” y una etiqueta asociada “Upload Progress: 35%”.

Además, se puede utilizar JavaScript para actualizar dinámicamente el valor y el máximo del progreso, lo que permite mostrar una barra de progreso en tiempo real.