The <progress> tag of HTML5 can directly implement the web page progress bar. 1. The basic usage is to set the value and max attributes, such as to display 30% progress; 2. If the progress is unknown, the value can be omitted, and only max is set, such as to indicate uncertain status; 3. You can customize the style through CSS, and browser compatibility needs to be handled; 4. It is often used in scenarios such as uploading files, form progress, game loading, etc.; 5. Be careful to avoid using when tasks are completed too quickly, and consider the compatibility issues of the old IE.

Progress bars are very common in web pages, such as uploading files, loading content, or displaying task completion. HTML5 provides a native tag <progress></progress> which can easily implement this feature without the need for additional CSS or JavaScript.

Basic usage: a simple progress bar

The easiest way to use the <progress></progress> tag is to set value and max properties. For example:

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

This displays a progress bar with the current progress of 30/100. The browser will automatically render the fill part of the progress bar according to the scale. If the max attribute is omitted, the default maximum value is 1, so you can also write it like this:

 <progress value="0.3"></progress>

However, for the sake of being clear and readable, it is recommended to write max="100" clearly, especially when dealing with percentage logic, which is more intuitive.

Use "undefined" status when uncertain progress

Sometimes you don't know when the task will be completed, such as waiting for the server to respond. At this time, you can use the <progress> tag without value to indicate "processing", but the specific progress is unknown:

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

Some browsers will display a dynamic animation indicating that the progress is being updated. This state is suitable for loading or waiting phases.

Custom style: Make progress bar look better

Although the default progress bar is already available, different browser styles are different and are usually simple. You can beautify it with CSS, but be careful about browser compatibility.

For example, if you want to change the background of the progress bar to gray and the progress part to blue, you can write it like this:

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

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

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

It should be noted that different browsers support different progress bar pseudo-elements. WebKit kernels (such as Chrome) support ::-webkit-progress-bar and ::-webkit-progress-value , while Firefox requires ::-moz-progress-bar .

If you want the styles to be uniform, it is recommended to reset the default style and customize all states.

Use scenarios and precautions

• Upload file : Dynamically update value in combination with JavaScript to reflect the upload progress in real time.
• Form filling progress : The multi-step form prompts the user how many steps have been completed.
• Game loading resources : Display resource loading progress to improve user experience.

Need to note:

• Don't abuse the progress bar. If the task is completed instantly, adding the progress bar will confuse the user.
• If complex animations or interactions are required, consider using
  CSS to simulate progress bars.
• Mobile browsers all support <progress></progress> , but may perform abnormally in older IE versions, so you need to pay attention to compatibility issues.

Basically that's it. Using <progress></progress> to implement the progress bar is quite straightforward, the key is to understand its attributes and style control methods.