<progress>: The Progress Indicator element #

::: section-content The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <progress> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor} File progress:

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

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} label { padding-right: 10px; font-size: 1rem; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

Attributes #

::: section-content 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 0 and be a valid floating point number. The default value is 1.

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.

::: {#sect1 .notecard .note} Note: Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element. :::

::: {#sect2 .notecard .note} Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute('value'). ::: :::

Examples #

::: section-content ::: code-example [html]{.language-name}

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

::: :::

Result #

::: section-content ::: {#sect3 .code-example} ::: iframe ::: ::: :::

Accessibility Concerns #

Labelling #

::: section-content In most cases you should provide an accessible label when using <progress>. While you can use the standard ARIA labelling attributes aria-labelledby or aria-label as you would for any element with role="progressbar", when using <progress> you can alternatively use the <label> element.

::: {#sect4 .notecard .note} Note: Text placed between the element's tags is not an accessible label, it is only recommended as a fallback for old browsers that do not support this element. :::

Examples #

::: code-example [html]{.language-name}

<label>
  Uploading Document: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

:::

Result #

::: {#sect5 .code-example} ::: iframe ::: ::: :::

Describing a particular region #

::: section-content If the <progress> element is describing the loading progress of a section of a page, use aria-describedby to point to the status, and set aria-busy="true" on the section that is being updated, removing the aria-busy attribute when it has finished loading.

Examples #

::: code-example [html]{.language-name}

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->


<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>

:::

Result #

::: {#sect6 .code-example} ::: iframe ::: ::: :::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-progress-element]{.small}

:::

Browser compatibility #

::: _table #

           Desktop                                                              Mobile                                                                

           Chrome    Edge   Firefox                 Internet   Opera   Safari   WebView   Chrome    Firefox for Android     Opera     Safari on IOS   Samsung
                                                    Explorer                    Android   Android                           Android                   Internet

progress 6 12 6 10 11 6 4.4 18 6 11 7 1.0

                            \[\"Before Firefox 14,                                                  \[\"Before Firefox 14,            Safari on iOS   
                            the `<progress>`                                                        the `<progress>`                  does not        
                            element was incorrectly                                                 element was incorrectly           support         
                            classified as a form                                                    classified as a form              indeterminate   
                            element, and therefore                                                  element, and therefore            progress bars   
                            had a `form` attribute.                                                 had a `form` attribute.           (they are       
                            This has been fixed.\",                                                 This has been fixed.\",           rendered like   
                            \"Firefox provides the                                                  \"Firefox provides the            0%-completed    
                            `::-moz-progress-bar`                                                   `::-moz-progress-bar`             progress bars). 
                            pseudo-element, which                                                   pseudo-element, which                             
                            lets you style the part                                                 lets you style the part                           
                            of the interior of the                                                  of the interior of the                            
                            progress bar                                                            progress bar                                      
                            representing the amount                                                 representing the amount                           
                            of work completed so                                                    of work completed so                              
                            far.\"\]                                                                far.\"\]                                          

max 6 12 6 10 11 6 4.4 18 6 11 7 1.0

value 6 12 6 10 11 6 4.4 18 6 11 7 1.0 #

:::

See also #

::: section-content

• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress{._attribution-link} :::