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.