mozilla

Revision 8410 of <progress>

  • Revision slug: HTML/Element/progress
  • Revision title: progress
  • Revision id: 8410
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Added some browser compatibility; 17 words added, 12 words removed

Revision Content

{{ HTMLVersionHeader("5") }}

Summary

The HTML progress (<progress>) element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar.

Usage context

Permitted content Phrasing content
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parent element Phrasing content, but there must be no progress element descendants.
Normative document HTML5, section 4.10.16

Attributes

Like all other HTML elements, this element has the global attributes.

{{ htmlattrdef("form") }}
This attribute specifies the form which the progress element belongs to.
{{ htmlattrdef("max") }}
This attribute describes how much work the task indicated by the progress element requires.
{{ htmlattrdef("value") }}
This attribute specifies how much of the task that has been completed. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

You can use the {{ cssxref("orient") }} property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The {{ cssxref(":indeterminate") }} pseudo-class can be used to match against indeterminate progress bars.

DOM interface

This element implements the HTMLProgressElement interface.

Examples

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

Result

{{ HTMLLiveSample("progress.html") }}

On Google Chrome, the resulting progress looks like this:

progress-1.png

Additional examples

See {{ cssxref("orient") }}.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 6.0 {{ CompatGeckoDesktop("6.0") }} {{ CompatNo() }} 11.0 {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("6.0") }} {{ CompatNo() }} 11.0 {{ CompatNo() }}

Gecko notes

Gecko provides the {{ cssxref("::-moz-progress-bar") }} pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.

See also

  • {{ cssxref("orient") }}
  • {{ cssxref(":indeterminate") }}

Revision Source

<p>{{ HTMLVersionHeader("5") }}</p>
<h2>Summary</h2>
<p>The HTML <em>progress</em> (<code>&lt;progress&gt;</code>) element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a></td> </tr> <tr> <td>Tag omission</td> <td>None, both the start tag and the end tag are mandatory.</td> </tr> <tr> <td>Permitted parent element</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>, but there must be no progress element descendants.</td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">HTML5, section 4.10.16</a></td> </tr> </tbody>
</table>
<h2>Attributes</h2>
<p>Like all other HTML elements, this element has the <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("form") }}</dt> <dd>This attribute specifies the form which the <code>progress</code> element belongs to.</dd> <dt>{{ htmlattrdef("max") }}</dt> <dd>This attribute describes how much work the task indicated by the <code>progress</code> element requires.</dd> <dt>{{ htmlattrdef("value") }}</dt> <dd>This attribute specifies how much of the task that has been completed. If there is no <code>value</code> attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.</dd>
</dl>
<p>You can use the {{ cssxref("orient") }} property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The {{ cssxref(":indeterminate") }} pseudo-class can be used to match against indeterminate progress bars.</p>
<dl> <h2>DOM interface</h2> <p>This element implements the <code><a href="/en/DOM/HTMLProgressElement" title="en/DOM/HTMLProgressElement">HTMLProgressElement</a></code> interface.</p> <h2>Examples</h2>
<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
</pre>
<h3>Result</h3>
<p>{{ HTMLLiveSample("progress.html") }}</p>
<p>On Google Chrome, the resulting progress looks like this:</p>
<p><img alt="progress-1.png" class="internal default" src="/@api/deki/files/4946/=progress-1.png"></p>
<h3>Additional examples</h3>
<p>See {{ cssxref("orient") }}.</p><h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>6.0</td> <td>{{ CompatGeckoDesktop("6.0") }}</td> <td>{{ CompatNo() }}</td> <td>11.0</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoMobile("6.0") }}</td> <td>{{ CompatNo() }}</td> <td>11.0</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<h3>Gecko notes</h3>
<p>Gecko provides the {{ cssxref("::-moz-progress-bar") }} pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.</p><h2>See also</h2> <ul> <li>{{ cssxref("orient") }}</li> <li>{{ cssxref(":indeterminate") }}</li> </ul></dl>
Revert to this revision