HTML progress 标签：显示进度与切换不确定状态

HTML <progress> 显示任务的完成程度。设置 value 和 max 表示确定进度，总工作量未知时则省略 value 属性。该元素不会自动测量上传或下载的进度。

通过 value 和 max 计算进度

value 是已完成的数量，max 是总数量。value 为 20 且 max 为 100 表示 20%；如果 max 为 200，则表示 10%。当省略 max 时，默认值为 1，因此 20% 表示为 value="0.2"。max 必须使用大于零的有效数字，value 的值必须介于零和 max 之间。

最小值始终为零；progress 不使用 min 属性。对于范围内的测量（例如存储使用量或分数），请考虑使用 meter。对于正在进行的任务的完成进度，请使用 progress。

完整示例：更新进度并切换到不确定状态

将此代码保存为 progress-demo.html 并在浏览器中打开。按钮仅用于练习时更改显示的值；它们不会传输文件。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>进度与不确定状态</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>进度状态练习</h1>
  <label for="work">示例任务进度</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20%完成</p>
  <button type="button" id="advance">改为80%</button>
  <button type="button" id="unknown">总量未知</button>
  <button type="button" id="reset">重置</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = '进行中';
        status.textContent = '进行中：总工作量未知。';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '%完成';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. 初始状态完成了20%。点击改为80%可将进度条及其描述更改为80%。
2. 点击总量未知可移除value属性。浏览器会显示不确定的进度，并伴随一句说明总量未知的文本。
3. 点击重置可恢复value属性并回到20%。

value="0"表示确定进度，但工作尚未完成；它不是不确定的。要将现有进度元素切换为不确定状态，请像示例中那样移除该属性。不确定进度的外观和动画可能因浏览器、操作系统及用户设置而异。

提供任务名称和状态句子

进度条内的“20%”文本是为旧版浏览器提供的后备文本，而不是任务名称的替代。使用匹配的 for 和 id 值关联一个标签，或者提供适当的 ARIA 可访问名称，以识别任务。通过颜色和条的长度，以及文字说明，显示当前状态。

对于实际任务，应根据服务器提供的信息或传输事件更新数值。仅通过计时器填充条并不表示工作已完成。为错误、取消和完成设计不同的消息和操作，并控制公告频率，以免状态更新过度重复。MDN 进度条参考资料 解释了语法和可访问性要求。