Los elementos progress y meter
Muestre valores de progreso y medición con HTML nativo
Los elementos progress y meter es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento progress
El elemento <progress> representa la finalización de una tarea:
<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->Progreso indeterminado
Sin un value, progress muestra una animación indeterminada:
<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->
<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>Animar progress con JavaScript
Actualice progress dinámicamente:
<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>
<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');
const interval = setInterval(() => {
progress += 10;
bar.value = progress;
pct.textContent = progress + '%';
if (progress >= 100) clearInterval(interval);
}, 500);
</script>El elemento meter
El elemento <meter> muestra una medición escalar dentro de un intervalo conocido:
<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
- Disk usage
- Password strength
- Score or rating
- Fuel level
-->Atributos de meter
meter tiene varios atributos para definir intervalos óptimos y de advertencia:
<meter
min="0" <!-- minimum possible value -->
max="100" <!-- maximum possible value -->
low="30" <!-- threshold: below this = low -->
high="70" <!-- threshold: above this = high -->
optimum="50" <!-- where the optimal value lies -->
value="85"
>85/100</meter>Estados de color de meter
Los navegadores asignan colores a meter según los valores low, high y optimum:
<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
10 errors <!-- green: value is in the good zone -->
</meter>
<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
55 points <!-- yellow: between low and high -->
</meter>Uso de meter para el espacio en disco
Un caso de uso clásico de meter: el uso del disco o de la memoria:
<label for="disk">Disk usage:</label>
<meter
id="disk"
min="0"
max="500"
low="400"
high="450"
optimum="0"
value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>Indicar la seguridad de una contraseña con meter
Use meter para mostrar la seguridad de una contraseña:
<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>
<script>
document.getElementById('pwd').addEventListener('input', function() {
const strength = calculateStrength(this.value); // 0-4
document.getElementById('strength').value = strength;
});
</script>Aplicar estilos a progress y meter
Estilos personalizados para progress y meter:
/* Basic progress styling */
progress {
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: #e2e8f0;
border: none;
}
progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }Accesibilidad de progress
Añada atributos ARIA para mejorar la compatibilidad con lectores de pantalla:
<label for="upload">Upload progress</label>
<progress
id="upload"
max="100"
value="65"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"
aria-label="File upload: 65% complete"
>65%</progress>Resumen de progress frente a meter
Diferencia clave:
<progress>— finalización de una tarea a lo largo del tiempo; el valor aumenta hacia max; puede ser indeterminado<meter>— medición escalar estática; el valor ya se conoce; tiene zonas low, high y optimum
Cuándo usar cada uno
Guía de casos de uso:
- progress — carga de archivos, asistente de finalización de formularios, barra de carga
- meter — uso del disco, indicador de combustible, puntuación crediticia, nivel de batería, relevancia de resultados de búsqueda
Comprobación rápida
¿Qué elemento es adecuado para mostrar cuánto espacio está ocupado en un disco duro?
Recapitulación: progress y meter
Aspectos esenciales de progress y meter:
<progress max value>— finalización de una tarea; es indeterminado sin value<meter min max low high optimum value>— medición estática- El navegador colorea meter automáticamente según la posición de optimum
- Añada aria-valuenow/min/max para mejorar la compatibilidad con lectores de pantalla
Preguntas frecuentes
¿La lección «Los elementos progress y meter» es gratis?
Sí — el texto completo de «Los elementos progress y meter» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Los elementos progress y meter»?
Muestre valores de progreso y medición con HTML nativo Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Los elementos progress y meter»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- aside: contenido complementario
- figure y figcaption: una revisión
- details y summary: componente de divulgación
- Los elementos progress y meter