The HTML <progress> element displays the task completion status by setting the value, min and max attributes. If min and max are omitted, the default range is 0 to 1; the value can be omitted to show uncertain progress; supports CSS-style custom appearance; and the progress can be dynamically updated through JavaScript. For example: <progress value="40" max="100"></progress> means 40% has been completed. When the progress is uncertain, use <progress></progress>. Combined with CSS, it can unify the appearance. JavaScript can be used to update progress values ??in real time, such as simulating a progress bar that is updated every half second.

The <progress></progress> element in HTML is a simple and semantic way to show the completion status of a task. It renders as a progress bar by default, and it's especially useful when you want to visually represent how much of something has been completed — like file uploads, form steps, or loading processes.

Here's how to use it effectively.

Basic Usage: Show Progress with Min and Max Values

To use the <progress></progress> element, you typically set the value , min , and max attributes. The browser then calculates how full the progress bar should appear based on these values.

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

• value : current progress (eg, 40)
• min : starting point (usually 0)
• max : total amount needed to complete (eg, 100)

If you omit min and max , browsers assume a range from 0 to 1. So this:

 <progress value="0.6"></progress>

...is equivalent to:

 <progress min="0" max="1" value="0.6"></progress>

This flexibility makes it easy to integrate into different kinds of tasks.

Indeterminate Progress: When You Don't Know the Exact Status

Sometimes, you don't know how long a task will take — for example, waiting for a server response or processing an unknown amount of data. In that case, you can use an independent progress bar by omitting the value attribute entirely.

 <progress></progress>

Browsers will show a looping animation instead of a filled bar, indicating that something is happening but the exact progress isn't known.

This is helpful during initial loading phases or background processes where timing is unpredictable.

Styling the Progress Bar

By default, the look of a <progress> element varies across browsers. If you want a consistent design, you'll need to apply some CSS.

Here's a basic example:

 progress {
  width: 100%;
  height: 20px;
  border-radius: 5px;
  background-color: #eee;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 5px;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 5px;
}

Keep in mind:

• Firefox uses ::-moz-progress-bar instead of ::-webkit-progress-value
• Customizing the appearance may require vendor prefixes or JavaScript workarounds in older browsers

You can also animate or update styles dynamically using JavaScript if needed.

Updating Progress Dynamically with JavaScript

Most real-world uses involve updating the progress bar as a task progresses. You can easily do this with JavaScript by targeting the value property.

For example:

 <progress id="taskProgress" value="0" max="100"></progress>
<p id="percent">0%</p>

<script>
  let progress = document.getElementById(&#39;taskProgress&#39;);
  let percent = document.getElementById(&#39;percent&#39;);

  function updateProgress(value) {
    progress.value = value;
    percent.textContent = value &#39;%&#39;;
  }

  // Simulate progress
  let i = 0;
  let interval = setInterval(() => {
    i = 10;
    updateProgress(i);
    if (i >= 100) clearInterval(interval);
  }, 500);
</script>

This script simulates a task that updates every half second. In practice, you'd tie the updates to actual events like file upload progress or step completion in a multi-step form.

That's basically how the <progress></progress> element works. It's straightforward and accessible by default, and with a little styling and scripting, it becomes a powerful visual indicator for user feedback.

The above is the detailed content of What is the element, and how do I use it to display the progress of a task?. For more information, please follow other related articles on the PHP Chinese website!