HTML Progress Tag Example

Introduction

The HTML <progress> tag is used to indicate the progress of a task. It is typically used to display a progress bar for a task within an HTML web page. In this lab, you will learn how to create a basic progress bar using the HTML <progress> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70819{{"`HTML Task Progress`"}} html/head_elems -.-> lab-70819{{"`HTML Task Progress`"}} html/text_head -.-> lab-70819{{"`HTML Task Progress`"}} html/forms -.-> lab-70819{{"`HTML Task Progress`"}} end

Create the HTML Structure

First, create the basic HTML structure for the progress bar using the following code in the index.html file:

<!doctype html>
<html>
  <head>
    <title>HTML Progress Tag Example</title>
  </head>
  <body>
    <h1>HTML Progress Tag</h1>
    <label for="progress-bar">Task Progress:</label>
    <progress id="progress-bar" max="100"></progress>
  </body>
</html>

In this code, we have included the necessary tags for creating an HTML page, a heading tag for the page title, a label tag to describe our progress bar, and the <progress> tag with an id attribute of "progress-bar" and a max attribute of 100.

Set the Value of the Progress Bar

To set the value of the progress bar, add the value attribute to the progress tag with a value between 0 and 100. For example, to set the progress bar to 50%, add the following code after the <progress> tag:

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

Adding JavaScript to Update the Progress Bar

To update the progress bar dynamically, we will add some JavaScript to change the value attribute of the progress tag.

Add the following JavaScript code to the HTML file:

<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>

In this code, we have created a function called updateProgress() which updates the value of the progress bar every 100 milliseconds. The function checks if the progress bar is at 100% and stops the interval if it is.

Finally, we set the interval by calling setInterval() with our updateProgress() function and a time interval of 100 milliseconds.

Save the index.html file and open it in a web browser. You should now see a progress bar that increases in value over time until it reaches 100%.

Summary

By following the above steps, you have learned how to create a basic progress bar using the <progress> tag in HTML. Additionally, you have learned how to update the progress bar dynamically using JavaScript. This technique can be useful for displaying the progress of a long-running task or for indicating the progress of a file upload.

HTML Task Progress