Definición destacada
¿Como funciona el comando en HTML5: 'progress'?
Última modificación: 2024-06-18
<progress> en HTML5: Detalle y Atributos
El 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.
Atributos del elemento <progress>
-
value (float):
- Descripción: Representa el estado actual del progreso.
- Uso: Especifica cuánto progreso se ha hecho en relación con el máximo especificado por el atributo
max. - Ejemplo:
<progress value="30">
-
max (float):
- Descripción: Define el valor máximo del progreso, es decir, cuándo el progreso se considera completo.
- Uso: Especifica el umbral superior del progreso que, por defecto, es 1.
- Ejemplo:
<progress max="100">
-
form (form_id):
- Descripción: Este atributo toma el
idde un elemento<form>al que el<progress>pertenece y lo asocia a ese formulario. - Uso: Útil para formularios donde el progreso de una acción específica debe ser mostrado.
- Ejemplo:
<progress value="30" max="100" form="myForm">
- Descripción: Este atributo toma el
Atributos Globales y Eventos
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.
Uso del Elemento <progress> con Ejemplos Sencillos
A continuación, algunos ejemplos que muestran cómo utilizar el elemento <progress> en distintos escenarios:
- Progreso Básico:
<!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%.
- Progreso Indeterminado:
<!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á.
- Progreso con Formulario:
<!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.
- Estilizando
<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.