<progress> en HTML5: Detalle y AtributosEl elemento <progress> en HTML5 se utiliza para representar el progreso de una tarea en ejecución. Este elemento es especialmente útil para mostrar el progreso de operaciones como descargas, cargas de archivos, o cualquier otro proceso que tenga un inicio, un medio y un fin.
<progress>value (float):
max.<progress value="30">max (float):
<progress max="100">form (form_id):
id de un elemento <form> al que el <progress> pertenece y lo asocia a ese formulario.<progress value="30" max="100" form="myForm">Adicionalmente, como la mayoría de los elementos HTML, <progress> soporta los atributos globales de HTML5 y puede manejar eventos comunes como onclick, onchange, etc.
<progress> con Ejemplos SencillosA continuación, algunos ejemplos que muestran cómo utilizar el elemento <progress> en distintos escenarios:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Progreso Básico</title>
</head>
<body>
<label for="file-progress">Progreso de descarga:</label>
<progress id="file-progress" value="50" max="100"></progress>
</body>
</html>En este ejemplo, el valor actual del progreso es 50 y el valor máximo es 100, lo que significa que el progreso está en un 50%.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Progreso Indeterminado</title>
</head>
<body>
<label for="indeterminate-progress">Carga de datos:</label>
<progress id="indeterminate-progress"></progress>
</body>
</html>Si se omite el atributo value, el progreso se mostrará en un estado indeterminado, indicando que el proceso está en curso pero no se sabe cuánto tiempo tomará.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario con Progreso</title>
</head>
<body>
<form id="uploadForm">
<label for="upload-progress">Subiendo archivo:</label>
<progress id="upload-progress" value="70" max="100" form="uploadForm"></progress>
<input type="submit" value="Subir">
</form>
</body>
</html>Aquí, el <progress> está asociado con un formulario mediante el atributo form. Aunque es un poco redundante en este contexto, podría ser útil en casos más complejos.
<progress> con CSS:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
progress {
width: 100%;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #f3f3f3;
}
progress::-webkit-progress-value {
background-color: #4caf50;
}
progress::-moz-progress-bar {
background-color: #4caf50;
}
</style>
<title>Progreso Estilizado</title>
</head>
<body>
<label for="styled-progress">Progreso estilizado:</label>
<progress id="styled-progress" value="60" max="100"></progress>
</body>
</html>En este caso, se ha añadido CSS para estilizar el elemento <progress>, cambiando su apariencia gráfica.
Estos ejemplos ilustran cómo se puede utilizar el elemento <progress> en diferentes escenarios y cómo se le pueden aplicar atributos para controlar y mostrar el progreso de tareas de forma efectiva.