La etiqueta <progress> muestra cuánto se completó una tarea.
Atributos:
- max: La cantidad total de trabajo requerido para la misión. 1 es el valor predeterminado.
- valor: Indica la proporción de la tarea que se ha completado.
Notas:
Para mostrar el progreso de una tarea, use la etiqueta <progreso> de acuerdo con JavaScript. La etiqueta <progress> no se usa para reflejar un indicador (por ejemplo, uso de espacio en disco o relevancia del resultado de una consulta). En su lugar, utilice la etiqueta <meter> para mostrar un indicador. Para conocer las mejores prácticas de accesibilidad, utilice la etiqueta <label> .
Ejemplo 1: El siguiente ejemplo demuestra el uso de la etiqueta <progress> para mostrar una barra de progreso.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksForGeeks</h1> <h2>Java Collections and Frameworks</h2> <label for="course"> Downloading course in progress : </label> <progress id="course" value="72" max="100"> 72% </progress> </body> </html>
Producción:
Ejemplo de barra de progreso
Ejemplo 2: El siguiente ejemplo demuestra cómo representar la calificación para diferentes lenguajes de programación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
color: green;
}
h2 {
text-align: left;
color: red;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Programming Language Rating</h2>
<label for="C++">C++ ::</label>
<progress id="C++" value="32" max="100">
62%
</progress>
<br /><br />
<label for="J">Java ::</label>
<progress id="J" value="84" max="100">
84%
</progress>
<br /><br />
<label for="P">Python ::</label>
<progress id="P" value="42" max="100">
42%
</progress>
<br /><br />
<label for="H">HTML ::</label>
<progress id="H" value="70" max="100">
70%
</progress>
<br /><br />
<label for="C">CSS ::</label>
<progress id="C" value="55" max="100">
55%
</progress>
<br /><br />
<label for="JS">JavaScript ::</label>
<progress id="JS" value="28" max="100">
28%
</progress>
</body>
</html>
Producción:
etiqueta <progreso>
Los atributos globales HTML también son compatibles con la etiqueta <progress> . Los atributos de eventos HTML también son compatibles con la etiqueta <progress> .
Publicación traducida automáticamente
Artículo escrito por piyushkr2022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA