En este artículo, veremos qué etiqueta se usa para representar el progreso de una tarea en HTML. Para representar el progreso de una tarea, usaremos la etiqueta <progress> . Esta etiqueta se utiliza para representar el progreso de una tarea. También se define cuánto trabajo se realiza y cuánto queda.
Sintaxis:
<progress attributes...> </progress>
Atributos: esta etiqueta consta de dos atributos que se enumeran a continuación:
- max: Representa el trabajo total que se debe realizar para completar una tarea.
- value: Representa la cantidad de trabajo ya realizado.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Progress tag to represent the progress of a task </title> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Progress tag to represent the progress of a task </h3> <span>GeeksforGeeks Work Progress:</span> <progress value="57" max="100"></progress> </center> </body> </html>
Producción:
Etiqueta HTML <meter> : la etiqueta <meter> se utiliza para definir la escala de medición en un rango bien definido y también admite un valor fraccionario. También se conoce como calibre. Se utiliza en uso de disco, resultado de consulta de relevancia, etc.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Meter tag to measure data within
a specified range
</title>
<style>
#met {
width: 300px;
margin: 0 auto;
}
meter {
width: 150px;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Meter tag to measure data within
a specified range
</h3>
</center>
<div id="met">
<span>GeeksforGeeks:</span>
<meter value="55" min="0" max="100">
55
</meter>
</div>
</body>
</html>
Producción:
La etiqueta HTML <progress> es diferente de la etiqueta HTML <meter>: la etiqueta <progress> se usa para representar el progreso de una tarea, mientras que la etiqueta <meter> se usa para representar las medidas escalares en un rango determinado.