[zh-cn]: create docs for HTMLProgressElement (#23104)

Co-authored-by: Jason Ren <[email protected]>

files/zh-cn/web/api/htmlprogresselement/index.md

@@ -0,0 +1,41 @@
+---
+title: HTMLProgressElement
+slug: Web/API/HTMLProgressElement
+l10n:
+  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLProgressElement`** 接口提供用于操作 {{HTMLElement("progress")}} 元素布局和呈现的特定属性和方法（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用）。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLProgressElement.max")}}
+  - : 一个反映同名内容属性的 `double` 值，仅限于大于零的数字。其默认值是 `1.0`。
+- {{domxref("HTMLProgressElement.position")}} {{ReadOnlyInline}}
+  - : 返回一个 `double` 值，返回当前值（`value`）除以最大值（`max`）的结果；如果进度条是不确定的进度条，它返回 `-1`。
+- {{domxref("HTMLProgressElement.value")}}
+  - : 一个反映当前值的 `double` 值；如果进度条是不确定的进度条，它返回 `0`。
+- {{domxref("HTMLProgressElement.labels")}} {{ReadOnlyInline}}
+  - : 返回包含此元素的 {{HTMLElement("label")}} 元素列表的 {{domxref("NodeList")}} 。
+
+## 实例方法
+
+_无特定方法；从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{HTMLElement("progress")}}

files/zh-cn/web/api/htmlprogresselement/labels/index.md

@@ -0,0 +1,45 @@
+---
+title: HTMLProgressElement：labels 属性
+slug: Web/API/HTMLProgressElement/labels
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
+---
+
+{{APIRef("DOM")}}
+
+**`HTMLProgressElement.labels`** 只读属性返回一个与 {{HTMLElement("progress")}} 元素有关联的 {{HTMLElement("label")}} 元素的 {{domxref("NodeList")}}。
+
+## 值
+
+一个与 `<progress>` 元素有关联的 `<label>` 元素的 {{domxref("NodeList")}}。
+
+## 示例
+
+### HTML
+
+```html
+<label id="label1" for="test">标签 1</label>
+<progress id="test" value="70" max="100">70%</progress>
+<label id="label2" for="test">标签 2</label>
+```
+
+### JavaScript
+
+```js
+window.addEventListener("DOMContentLoaded", () => {
+  const progress = document.getElementById("test");
+  for (const label of progress.labels) {
+    console.log(label.textContent); // “标签 1”和“标签 2”
+  }
+});
+```
+
+{{EmbedLiveSample("示例", "100%", 30)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}

files/zh-cn/web/api/htmlprogresselement/max/index.md

@@ -0,0 +1,50 @@
+---
+title: HTMLProgressElement：max 属性
+slug: Web/API/HTMLProgressElement/max
+l10n:
+  sourceCommit: 63c87435a30517357c17c6bf49785cf0c14991b0
+---
+
+{{APIRef("HTML DOM")}}
+
+{{DOMxRef("HTMLProgressElement")}} 接口的 **`max`** 属性表示 {{HTMLElement("progress")}} 元素的范围的上限。
+
+## 值
+
+一个大于零的浮点数。默认值是 1.0。
+
+## 示例
+
+### HTML
+
+```html
+进度：<progress id="pBar"></progress> <span>0</span>%
+```
+
+### JavaScript
+
+```js
+const pBar = document.getElementById("pBar");
+const span = document.getElementsByTagName("span")[0];
+
+console.log(`max 的默认值：${pBar.max}`);
+
+pBar.max = 100;
+pBar.value = 0;
+
+setInterval(() => {
+  pBar.value = pBar.value < pBar.max ? pBar.value + 1 : 0;
+
+  span.textContent = Math.trunc(pBar.position * 100);
+}, 100);
+```
+
+{{EmbedLiveSample("示例", "100%", 30)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}

files/zh-cn/web/api/htmlprogresselement/position/index.md

@@ -0,0 +1,50 @@
+---
+title: HTMLProgressElement：position 属性
+slug: Web/API/HTMLProgressElement/position
+l10n:
+  sourceCommit: 2b1417faf65c87bb164a0e75043c1fb53f43a848
+---
+
+{{APIRef("HTML DOM")}}
+
+{{DOMxRef("HTMLProgressElement")}} 接口的 **`position`** 只读属性返回 {{HTMLElement("progress")}} 元素的当前进度。
+
+## 值
+
+对于确定的进度条返回当前值除以最大值的结果，也就是说，它是介于 `0.0` 和 `1.0` 之间的分数。
+
+对于不确定的进度条该值总是 `-1`。
+
+## 示例
+
+### HTML
+
+```html
+确定的进度条：<progress id="pBar"></progress>位置： <span>0</span>
+```
+
+### JavaScript
+
+```js
+const pBar = document.getElementById("pBar");
+const span = document.getElementsByTagName("span")[0];
+
+pBar.max = 100;
+pBar.value = 0;
+
+setInterval(() => {
+  pBar.value = pBar.value < pBar.max ? pBar.value + 1 : 0;
+
+  span.textContent = pBar.position;
+}, 100);
+```
+
+{{EmbedLiveSample("示例", "100%", 30)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}

files/zh-cn/web/api/htmlprogresselement/value/index.md

@@ -0,0 +1,52 @@
+---
+title: HTMLProgressElement：value 属性
+slug: Web/API/HTMLProgressElement/value
+l10n:
+  sourceCommit: 63c87435a30517357c17c6bf49785cf0c14991b0
+---
+
+{{APIRef("HTML DOM")}}
+
+{{DOMxRef("HTMLProgressElement")}} 接口的 **`value`** 属性表示 {{HTMLElement("progress")}} 元素的当前进度。
+
+## 值
+
+一个浮点数。如果未在进度条上设置 {{DOMxRef("HTMLProgressElement.max", "max")}} 值，则该值的范围在 0.0 和 1.0 之间。如果设置了 `max` 值，则 `value` 范围在 `0` 和 `max` 之间。
+
+如果 {{DOMxRef("HTMLProgressElement")}} 对象上未设置 `value` 属性，则进度条仍然不确定。
+
+## 示例
+
+### HTML
+
+```html
+确定的进度条：<progress id="pBar"></progress> <span>0</span>%
+<br />
+不确定的进度条：<progress></progress>
+```
+
+### JavaScript
+
+```js
+const pBar = document.getElementById("pBar");
+const span = document.getElementsByTagName("span")[0];
+
+pBar.max = 100;
+pBar.value = 0;
+
+setInterval(() => {
+  pBar.value = pBar.value < pBar.max ? pBar.value + 1 : 0;
+
+  span.textContent = Math.trunc(pBar.position * 100);
+}, 100);
+```
+
+{{EmbedLiveSample("示例", "100%", 30)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}