From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fprogress.html | 144 +++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 devdocs/html/element%2Fprogress.html (limited to 'devdocs/html/element%2Fprogress.html') diff --git a/devdocs/html/element%2Fprogress.html b/devdocs/html/element%2Fprogress.html new file mode 100644 index 00000000..37dbd36c --- /dev/null +++ b/devdocs/html/element%2Fprogress.html @@ -0,0 +1,144 @@ +

<progress>: The Progress Indicator element

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

+

Try it

+
+
Content categories Flow content, phrasing content, labelable content, palpable content.
Permitted content Phrasing content, but there must be no <progress> element among its descendants.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role progressbar
Permitted ARIA roles No role permitted
DOM interface HTMLProgressElement
+
+

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 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.

Note: Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

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

+
+

html

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

Result

+
+ + +
+

Accessibility Concerns

+ +

Labelling

+
+

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.

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

+

html

+
<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

+
+ + +
+
+

Describing a particular region

+
+

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

+

html

+
<div aria-busy="true" aria-describedby="progress-bar">
+  <!-- content is for this region is loading -->
+</div>
+
+<!-- ... -->
+
+<progress id="progress-bar" aria-label="Content loading…"></progress>
+
+
Result
+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-progress-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
progress612
6["Before Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.", "Firefox 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."]
101164.418
6["Before Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.", "Firefox 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."]
11
7Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
1.0
max6126101164.41861171.0
value6126101164.41861171.0
+

See also

+
+

+ © 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 +

+
-- cgit v1.2.3