Ejemplo de etiqueta HTML <progress>

Introducción

La etiqueta HTML <progress> se utiliza para indicar el progreso de una tarea. Por lo general, se utiliza para mostrar una barra de progreso para una tarea dentro de una página web HTML. En este laboratorio, aprenderá a crear una barra de progreso básica utilizando la etiqueta HTML <progress>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70819{{"Progreso de tarea en HTML"}} html/head_elems -.-> lab-70819{{"Progreso de tarea en HTML"}} html/embed_media -.-> lab-70819{{"Progreso de tarea en HTML"}} html/forms -.-> lab-70819{{"Progreso de tarea en HTML"}} html/inter_elems -.-> lab-70819{{"Progreso de tarea en HTML"}} html/custom_attr -.-> lab-70819{{"Progreso de tarea en HTML"}} end

Crea la estructura HTML

Primero, crea la estructura HTML básica para la barra de progreso utilizando el siguiente código en el archivo index.html:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de etiqueta HTML <progress></title>
  </head>
  <body>
    <h1>Etiqueta HTML <progress></h1>
    <label for="progress-bar">Progreso de la tarea:</label>
    <progress id="progress-bar" max="100"></progress>
  </body>
</html>

En este código, hemos incluido las etiquetas necesarias para crear una página HTML, una etiqueta de encabezado para el título de la página, una etiqueta de etiqueta para describir nuestra barra de progreso y la etiqueta <progress> con un atributo id de "progress-bar" y un atributo max de 100.

Establece el valor de la barra de progreso

Para establecer el valor de la barra de progreso, agrega el atributo value a la etiqueta de progreso con un valor entre 0 y 100. Por ejemplo, para establecer la barra de progreso al 50%, agrega el siguiente código después de la etiqueta <progress>:

<progress id="progress-bar" max="100" value="50"></progress>

Agregar JavaScript para actualizar la barra de progreso

Para actualizar dinámicamente la barra de progreso, agregaremos un poco de JavaScript para cambiar el atributo value de la etiqueta de progreso.

Agrega el siguiente código de JavaScript al archivo HTML:

<script>
  let progressBar = document.getElementById("progress-bar");
  let percent = 0;

  function updateProgress() {
    if (percent == 100) {
      clearInterval(intervalId);
      return;
    }
    progressBar.value = percent;
    percent++;
  }

  let intervalId = setInterval(updateProgress, 100);
</script>

En este código, hemos creado una función llamada updateProgress() que actualiza el valor de la barra de progreso cada 100 milisegundos. La función verifica si la barra de progreso está al 100% y detiene el intervalo si es así.

Finalmente, establecemos el intervalo llamando a setInterval() con nuestra función updateProgress() y un intervalo de tiempo de 100 milisegundos.

Guarda el archivo index.html y dile al navegador web que lo abra. Ahora deberías ver una barra de progreso que aumenta su valor con el tiempo hasta llegar al 100%.

Resumen

Siguiendo los pasos anteriores, has aprendido cómo crear una barra de progreso básica utilizando la etiqueta <progress> en HTML. Además, has aprendido cómo actualizar dinámicamente la barra de progreso utilizando JavaScript. Esta técnica puede ser útil para mostrar el progreso de una tarea que dura mucho tiempo o para indicar el progreso de una carga de archivos.