Revision 299221 of <progress>

  • Revision slug: HTML/Element/progress
  • Revision title: progress
  • Revision id: 299221
  • Created:
  • Creator: tehsis
  • Is current revision? No
  • Comment

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("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 Mac OS X, the resulting progress looks like this:

progress-1.png

On Windows, the resulting progress looks like this:

progress-firefox.JPG

Additional examples

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 6.0 {{ CompatGeckoDesktop("6.0") }} 10 11.0 6.0
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.

{{ gecko_callout_heading("14.0") }}

Prior to Gecko 14.0 {{ geckoRelease("14.0") }}, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.

See also

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

Revision Source

<div>
  {{ HTMLVersionHeader(5) }}</div>
<h2 id="Summary">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 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Permitted content</td>
      <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="en-US/docs/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-US/docs/HTML/Content_categories#Phrasing_content" title="en-US/docs/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 id="Attributes">Attributes</h2>
<p>Like all other HTML elements, this element has the <a href="/en-US/docs/HTML/Global_attributes" rel="internal">global attributes</a>.</p>
<dl>
  <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>
</dl>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLProgressElement" title="en-US/docs/DOM/HTMLProgressElement">HTMLProgressElement</a></code> interface.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
</pre>
<h3 id="Result">Result</h3>
<p>{{ HTMLLiveSample("progress.html") }}</p>
<p>On Mac OS X, the resulting progress looks like this:</p>
<p><img alt="progress-1.png" class="internal default" src="/@api/deki/files/4946/=progress-1.png" style="" /></p>
<p>On Windows, the resulting progress looks like this:</p>
<p><img alt="progress-firefox.JPG" class="internal default" src="/@api/deki/files/6031/=progress-firefox.JPG" /></p>
<h3 id="Additional_examples">Additional examples</h3>
<p>See {{ cssxref("orient") }}.</p>
<h2 id="Browser_compatibility">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>10</td>
        <td>11.0</td>
        <td>6.0</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 id="Gecko_notes">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>
<div class="geckoVersionNote" style="undefined">
  <p>{{ gecko_callout_heading("14.0") }}</p>
  <p>Prior to Gecko 14.0 {{ geckoRelease("14.0") }}, the <code>&lt;progress&gt;</code> element was incorrectly classified as a form element, and therefore had a <code>form</code> attribute. This has been fixed.</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ cssxref("orient") }}</li>
  <li>{{ cssxref(":indeterminate") }}</li>
</ul>
Revert to this revision