mozilla
Your Search Results

    <progress> Redirect 1

    There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

    Introduced in HTML5

    Summary

    The HTML <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. Javascript can be used to manipulate the value of progress bar.

    Attributes

    This element includes the global attributes.

    max
    This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than zero and be a valid floating point number.
    value
    This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. 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 orient property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The :indeterminate pseudo-class can be used to match against indeterminate progress bars.

    Examples

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

    Result

    On Mac OS X, the resulting progress looks like this:

    The progress bar seen in OS X Mavericks

    On Windows, the resulting progress looks like this:

    progress-firefox.JPG

    Additional examples

    See orient.

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard Living Standard  
    HTML5 Candidate Recommendation

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 6.0 6.0 (6.0) [1][2] 10 11.0 5.2
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support Yes 6.0 (6.0) [1][2] Not supported 11.0 Not supported

    Gecko notes

    [1] Gecko provides the ::-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.

    [2] Prior to Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.

    See also

    {{ HTMLRef }}

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,