In this section, we will learn what HTML <progress> element is and how to use it.

HTML Progress Bar: What is <progress> Tag in HTML?

HTML <progress> element is a way of creating a progress bar on a webpage to indicate how much of a work has been done.

For example, let’s say you have a web-service on one of your webpages and loading that service might take a little of time depending on the users’ internet speed.

So now, in order to show users the service is working and how much progress has been done, we can use the <progress> element.

Or let’s say you have a file uploader service in one of your webpages, now to show users how far their files have been uploaded and how much they should still wait, we can use the <progress> element there as well to indicate this.

Note: this element usually combined with JavaScript to dynamically change its value.

HTML <progress> Tag Syntax:

<progress value = “value” max = “max”> content </progress>

HTML <progress> Tag Values

First of all, the value we put in the body of this element is a value that gets displayed in the target user-agent (the browser) if it didn’t support the HTML <progress> element. So if that browser supports this element, then the value won’t be displayed.

Also, there are two attributes here that we need to take care of as well:

– max: this attribute is used to set how much work is required in total. The default value is set to 1, but we can change that to any other value we want! For example, 100, 1000, etc.

– value: this attribute is used to set how much work has been done! For example, if 30 percent of the work is completed, then the value of this attribute would be 30.

Example: progress bar in HTML

See the Pen progress bar in HTML by Omid Dehghan (@odehghan) on CodePen.

HTML <progress> Tag Attributes

Name	Description
max	This attribute specifies how much work requires in total for the progress to be completed.
value	This attribute specifies how much work has been done so far.