The <progress> tag is used to display the progress of a task. Using this tag you van create a progress bar on web page. The main purpose of this tag is to show file uploading progress.
The progress element represents the completion progress of a task. the task itself is irrelevant, but displaying its progress is not.
There are four attributes that are specified for the <progress> element: max, value, position, and labels. Before taking a look at each of theses attributes in turn, here are a few important notes on them −
If the value attribute exists, then the progress bar is considered to be determinate (i.e., it has exact limits). Otherwise it is considered to be indeterminate.
If the max attribute is not included, the default acceptable range for the progress bar is between 0.0 and 1.0 inclusive.
Authors are encouraged always to include the current value and the maximum value (if used) as inline text to the <progress> element so that the information is still visible to users of legacy browsers.
Max − The max attribute is a floating point number that indicates how much work the relevant task requires in total before it can be considered complete. The default value is 1.0.
Value − This is a floating point number that represents the current progress of the relevant task. Its value must be greater than or equal to 0.0 and less than or equal to 1.0 or the value of the max attribute if present.
Labels − This is also a read-only attribute that returns a list of the <progress> element’s labels (if there are any).
Position − This is a read-only attribute that returns the current position of the <progress> element. This value is equal to value / max for a determinate progress bar and -1 for an indeterminate progress bar (as the position can’t accurately be determined).
<!doctype html> <html> <body> <progress></progress> </body> </html>
You can also set the height and width of progress using css.
<!doctype html>
<html>
<head>
<style>
progress{
height: 45px;
}
</style>
</head>
<body>
<p>Download progress:</p>
<progress></progress>
</body>
</html>
Download progress: