Progress tag in html5 to display process status with attributes & examples <progress>

Progress tag is used to display a process progress. The tag is added in HTML5.

Attributes of progress tag

Value:

Valid Float number indicating amount of process completion, this should be less than or equal to Maximum value. If Maximum value is not there then it should be less than or equal to 1.0 , if the value is given as 0.2 then it is treated as 20 % completion.

Max:

Amount of total process completion. This should be more than or equal to value attribute. If the max value is only there without any value attribute then progress is shown as indeterminate

Examples of Progress tag

Here are some examples with different combination of attributes.

25%

<progress value="25" max="100">25%</progress>

50%

<progress value="50" max="100">50%</progress>

100%

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

100%

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

50%

<progress value="1.0">50%</progress>

Uses of Progress tag

More practical uses of progress tag is when it is used along with JavaScript. It can be connected to background processing like records updated, file uploaded or downloaded etc .

how Progress bar is managed by JavaScript button Click event

PHP & Ajax is used to update value of a progress bar

Progress bar using JQuery UI

progress tag in html5

Attributes of progress tag

Value:

Max:

Examples of Progress tag

Uses of Progress tag

Subscribe