1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<header><h1><progress>: The Progress Indicator element</h1></header><div class="section-content"><p>The <code><progress></code> <a href="../index">HTML</a> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/progress.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, labelable content, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but there must be no <code><progress></code> element among its descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role"><code>progressbar</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement"><code>HTMLProgressElement</code></a></td> </tr> </tbody> </table></div></figure>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="max"><a href="#max"><code>max</code></a></dt> <dd> <p>This attribute describes how much work the task indicated by the <code>progress</code> element requires. The <code>max</code> attribute, if present, must have a value greater than <code>0</code> and be a valid floating point number. The default value is <code>1</code>.</p> </dd> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>This attribute specifies how much of the task that has been completed. It must be a valid floating point number between <code>0</code> and <code>max</code>, or between <code>0</code> and <code>1</code> if <code>max</code> is omitted. 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.</p> </dd> </dl> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Unlike the <a href="meter"><code><meter></code></a> element, the minimum value is always 0, and the <code>min</code> attribute is not allowed for the <code><progress></code> element.</p> </div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate"><code>:indeterminate</code></a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute"><code>element.removeAttribute('value')</code></a>.</p> </div>
</div>
<h2 id="examples">Examples</h2>
<div class="section-content"><div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="sYbVDP2IuhmHL5r75JnUEJV1DgBWTyk+r2Q6Dq4Gv/k=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70 %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span>
</pre>
</div></div>
<h3 id="result">Result</h3>
<div class="section-content"><div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/progress/runner.html?id=examples" loading="lazy"></iframe>
</div></div>
<h2 id="accessibility_concerns">Accessibility Concerns</h2>
<h3 id="labelling">Labelling</h3>
<div class="section-content">
<p>In most cases you should provide an accessible label when using <code><progress></code>. While you can use the standard ARIA labelling attributes <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> as you would for any element with <code>role="progressbar"</code>, when using <code><progress></code> you can alternatively use the <a href="label"><code><label></code></a> element.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> 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.</p> </div> <h4 id="examples_2">Examples</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="2XAw33ZFo8U002wNEFxdJAJJuVI1wG+/0ADjGgbznU8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>
Uploading Document: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70 %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- OR --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Uploading Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70 %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect5">
<iframe class="sample-code-frame" title="Labelling sample" id="frame_labelling" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/progress/runner.html?id=labelling" loading="lazy"></iframe>
</div>
</div>
<h3 id="describing_a_particular_region">Describing a particular region</h3>
<div class="section-content">
<p>If the <code><progress></code> element is describing the loading progress of a section of a page, use <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a> to point to the status, and set <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy"><code>aria-busy="true"</code></a> on the section that is being updated, removing the <code>aria-busy</code> attribute when it has finished loading.</p> <h4 id="examples_3">Examples</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="SZbOj87Ct/1GbidII73AYhoOcTVKoCoKk2+TBmURn64=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">aria-busy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- content is for this region is loading --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- ... --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content loading…<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span>
</pre>
</div> <h5 id="result_3">Result</h5>
<div class="code-example" id="sect6">
<iframe class="sample-code-frame" title="Describing a particular region sample" id="frame_describing_a_particular_region" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/progress/runner.html?id=describing_a_particular_region" loading="lazy"></iframe>
</div>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element">HTML Standard <br><small># the-progress-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>progress</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>6</summary>["Before Firefox 14, the <code><progress></code> element was incorrectly classified as a form element, and therefore had a <code>form</code> attribute. This has been fixed.", "Firefox provides the <code>::-moz-progress-bar</code> pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far."]</details></td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>6</summary>["Before Firefox 14, the <code><progress></code> element was incorrectly classified as a form element, and therefore had a <code>form</code> attribute. This has been fixed.", "Firefox provides the <code>::-moz-progress-bar</code> pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far."]</details></td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes"><details><summary>7</summary>Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).</details></td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>max</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">7</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>value</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">7</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="meter"><code><meter></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate"><code>:indeterminate</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient"><code>-moz-orient</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar"><code>::-moz-progress-bar</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar"><code>::-webkit-progress-bar</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value"><code>::-webkit-progress-value</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-inner-element"><code>::-webkit-progress-inner-element</code></a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress</a>
</p>
</div>
|
