progress tag in html5

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

Visitors Rating
Your Rating




Google+
Md Shahab Alam

06-06-2016

Thanks Sir,Your Tutorial is very usefull

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer