Introduction
The progress tag is new in HTML5. The
<progress> tag defines work-in-progress. Use the progress element to display the progress of a time-consuming function in JavaScript. The progress element is currently supported in Opera and Chrome. For Example to show the progress of an indeterminate task such as showing the progress of a file upload. The <progress>
is not suitable for representing a gauge (such as disk space usage or a tally of votes). To represent a gauge, use the <meter> tag instead.
Syntax
<progress value="" max=""></progress>
The closing tag is mandatory. A progress tag can contain other tags. It can not contain another progress tag.
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to
provide the browser with more information about how the tag should appear or
behave. Attributes consist of a name and a value separated by an equals (=)
sign, with the value surrounded by double-quotes.
There are 3 kinds of attributes that you can add to your
HTML tags: Element-specific, global, and event handler content attributes. The
attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attributes Introduced by
HTML5
| Attributes |
Description |
| Value |
Defines the value of
completion. |
| Max |
Defines the current value
of the progress. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
|
HTML5
Global Attributes
|
| accesskey |
draggable |
style |
| class |
hidden |
tabindex |
| dir |
spellcheck |
|
| contenteditable |
id |
title |
| contextmenu |
lang |
|
Event Handler Content Attributes
Here are the standard HTML 5 event handler content
attributes.
| onabort |
onerror* |
onmousewheel |
| onblur* |
onfocus* |
onpause |
| oncanplay |
onformchange |
onplay |
| oncanplaythrough |
onforminput |
onplaying |
| onchange |
oninput |
onprogress |
| onclick |
oninvalid |
onratechange |
| oncontextmenu |
onkeydown |
onreadystatechange |
| ondblclick |
onkeypress |
onscroll |
| ondrag |
onkeyup |
onseeked |
| ondragend |
onload* |
onseeking |
| ondragenter |
onloadeddata |
onselect |
| ondragleave |
onloadedmetadata |
onshow |
| ondragover |
onloadstart |
onstalled |
| ondragstart |
onmousedown |
onsubmit |
| ondrop |
onmousemove |
onsuspend |
| ondurationchange |
onmouseout |
ontimeupdate |
| onemptied |
onmouseover |
onvolumechange |
| onended |
onmouseup |
onwaiting |
For example
Adding attributes to the progress bar and a
button.
- <progress id="progressBar" value="5" max="100" ></progress>
- <br />
- <input type="button" id="theButton" value="Add 15%"
- onclick="percent();"/>
Now adding the JavaScript
- function Percent() {
- var bar = document.getElementById("progressBar");
- bar.value += 10;
- };
Now, go ahead and refresh the page if you've already got it loaded and click the button a few times. Notice that the progress bar continues to grow as you continue to press
Notice that the progress bar continues to grow as you continue to press the button. Obviously, it stops at 100 because we have the max property set to 100 in the HTML.
Attributes
value
The value attribute specifies the current value (progress) of the task. This attribute is used together with the max attribute to specify the current progress and the goal of the task.
Syntax
<progress value="value">
Example
- <progress value="76" max="100">
- </progress>
max
The max attribute specifies the completion value of the task. This attribute is used together with the value attribute to specify the current progress and the goal of the task.
Syntax
<progress max="value">
Example
- <progress value="22" max="100"></progress>
There hasn't been a much easier way to show a
user that they are waiting for something, and I believe that it's bringing us
even closer to our web applications looking and feeling like native desktop
apps.