HTML progress Tag: How to Create Progress Bars with Examples

The <progress> tag in HTML shows task completion. It gives users visual feedback as the task runs.

Understand the <progress> Tag in HTML

The HTML <progress> tag shows how much of a task has finished. It acts like a progress bar. It works well for downloads or any step-by-step task.

Here is the basic tag:

<progress value="30" max="100"></progress>

Here is how it works:

• value shows how much has finished.
• max shows the full amount to complete.
• The browser draws a progress bar based on these two values.

The browser divides value by max to get a percentage. That number controls the fill level.

• If value="50" and max="100", the bar shows 50%.
• If value="5" and max="10", the bar shows 50%.

Remove one of them, and the progress bar switches to an indeterminate state.

Use <progress> when the task:

• Runs in steps
• uploads or downloads content
• Measures time or resource use

This tag only shows progress. It does not control or track the task.

Modern browsers support <progress>:

Old versions of Internet Explorer do not support it.

Attributes of the <progress> Tag in HTML

The value Attribute:

It shows how much of the task has finished.

<progress value="60" max="100"></progress>

This shows the bar at 60%. Users see that the task is more than halfway done.

The max Attribute:

Shows the total size of the task.

<progress value="25" max="50"></progress>

This shows 50%. Change max to raise or lower how fast the bar fills.

Default Behavior Without Attributes:

<progress></progress>

This runs in indeterminate mode. The bar shows an animation. The browser does not show any value.

Use this mode if the task length is unknown.

How to Style the <progress> Tag in HTML

Each browser gives its own look. You can style it like this:

progress {
  width: 200px;
  height: 20px;
}

This changes the size only. To style the color, use vendor selectors:

progress::-webkit-progress-bar {
  background-color: #eee;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
}

Use similar rules for Firefox with ::-moz-progress-bar.

JavaScript Integration with the <progress> Element

You can use JavaScript to change the value.

<progress id="loader" value="0" max="100"></progress>

<script>
  const bar = document.getElementById('loader');
  bar.value = 30;
</script>

This updates the bar to 30%.

You can also track uploads or downloads.

<progress id="task" value="0" max="10"></progress>

<script>
  let val = 0;
  const bar = document.getElementById('task');

  const timer = setInterval(() => {
    if (val >= 10) {
      clearInterval(timer);
    } else {
      val++;
      bar.value = val;
    }
  }, 1000);
</script>

This simulates a task that takes 10 seconds. The bar fills one step per second.

The Differences Between <progress> and <meter>

The <progress> shows how much of a known task is done. While <meter> shows a numeric range like a score or health bar.

Here is a table that shows you the key differences:

Use <progress> for tasks like file uploads. Use <meter> for values like CPU usage or grades.

Examples

File Upload Progress Bar:

<progress value="70" max="100"></progress>

This shows a file upload that finished 70%. The bar shows the status clearly.

Indeterminate Task Progress:

<progress></progress>

This shows an unknown task length. The bar animates to show that the task runs, but does not show how much is left.

Auto-Fill with JavaScript:

<progress id="bar" value="0" max="5"></progress>

<script>
  const bar = document.getElementById("bar");
  let current = 0;

  const fill = setInterval(() => {
    current++;
    bar.value = current;

    if (current >= 5) {
      clearInterval(fill);
    }
  }, 500);
</script>

This shows a task that fills in steps. JavaScript updates the progress every half-second.

Styled Custom Bar:

<style>
  progress {
    width: 250px;
    height: 25px;
  }

  progress::-webkit-progress-bar {
    background: #ddd;
  }

  progress::-webkit-progress-value {
    background: #2196f3;
  }
</style>

<progress value="40" max="100"></progress>

This example customizes the look. It changes the color and size of the bar for better visibility.

Wrapping Up

In this article, you learned what the <progress> tag does and how it works in HTML and JavaScript. You also saw how to style it and where it fits in the HTML family.

Here is a quick recap:

• Use <progress> to show task status.
• Set value and max to control fill level.
• Use it for downloads and loading bars. Also, you can use it for timers.
• Style it with CSS for better looks.
• Use JavaScript to update progress in real time.
• Do not confuse it with <meter>.

FAQs

<progress value="70" max="100"></progress>

<progress id="bar" max="100" value="0"></progress>
<script>
  let bar = document.getElementById("bar");
  let count = 0;
  let timer = setInterval(function() {
    if (count >= 100) {
      clearInterval(timer);
    } else {
      count++;
      bar.value = count;
    }
  }, 100);
</script>

<progress value="30" max="100"></progress>

<progress value="40" max="100"></progress>
<meter value="0.6"></meter>

Similar Reads