progress tag in html5

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

Attributes of progress tag


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.


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.

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

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

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

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

<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


* indicates required
Subscribe to plus2net

    Md Shahab Alam


    Thanks Sir,Your Tutorial is very usefull

    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer