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.
  1. <progress id="progressBar" value="5" max="100" ></progress>
  2. <br />
  3. <input type="button" id="theButton" value="Add 15%"
  4. onclick="percent();"/>
Now adding the JavaScript
  1. function Percent() {
  2. var bar = document.getElementById("progressBar");
  3. bar.value += 10;
  4. };
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
  1. <progress value="76" max="100">
  2. </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
  1. <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.