HTML 的 <progress> 元素

1. 什么是 <progress> 元素

<progress> 是 HTML5 新增的原生进度条元素，用于展示任务的完成进度，例如文件上传、下载、表单提交或页面加载的进度。它不需要引入任何第三方库，浏览器原生渲染，语义清晰，对屏幕阅读器友好。

一个最简单的示例：

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

浏览器会渲染出一条进度条，已填充部分占 70%。<progress> 元素内部可以放置文本内容，作为不支持该元素的旧浏览器中的降级提示。

2. 核心属性

<progress> 元素只有两个关键属性：

value：当前进度值，必须是大于 0 的浮点数。
max：进度总量，必须是大于 0 的浮点数。默认值为 1。

当 value 与 max 的比值即为进度百分比。例如：

<!-- 进度 50% -->
<progress value="0.5" max="1"></progress>

<!-- 进度 50% -->
<progress value="50" max="100"></progress>

不确定状态

当元素没有 value 属性时，进度条会呈现为不确定状态（通常是一个来回滚动的动画），适合表示「正在加载，但不知道具体进度」的场景：

<progress></progress>

3. 样式美化

浏览器默认的进度条样式比较朴素，可以通过 CSS 伪元素自定义外观。不同浏览器内核的样式规则有所差异，通常需要同时处理 WebKit 内核和 Firefox 的样式。

/* 整体容器 */
progress {
  width: 300px;
  height: 20px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

/* WebKit 内核：已填充部分 */
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-radius: 10px;
}

/* Firefox：已填充部分 */
progress::-moz-progress-bar {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-radius: 10px;
}

4. 动态更新进度

配合 JavaScript，可以轻松实现进度条的动态更新。下面是一个模拟文件上传进度的示例：

<progress id="upload" value="0" max="100"></progress>
<span id="percent">0%</span>

<script>
  const progress = document.getElementById('upload');
  const percent = document.getElementById('percent');
  let current = 0;

  const timer = setInterval(() => {
    current += 10;
    progress.value = current;
    percent.textContent = current + '%';

    if (current >= 100) {
      clearInterval(timer);
    }
  }, 500);
</script>

5. 与 <meter> 元素的区别

<progress> 常与 <meter> 元素混淆，但二者语义不同：

<progress>：表示任务的完成进度，数值会随时间增长，例如下载进度。
<meter>：表示已知范围内的度量值，例如磁盘使用率、评分、温度，数值可高可低。

<!-- 进度：任务完成度 -->
<progress value="80" max="100"></progress>

<!-- 度量：磁盘使用率 80%，处于警告区间 -->
<meter value="0.8" min="0" max="1" low="0.6" high="0.9" optimum="0.2"></meter>

6. 无障碍与兼容性

<progress> 元素自带 ARIA 角色 progressbar，屏幕阅读器可以自动识别。建议配合 aria-label 或内部文本提供更清晰的说明：

<progress value="40" max="100" aria-label="文件上传进度">40%</progress>

所有现代浏览器均支持 <progress> 元素，无需担心兼容性问题。对于极老旧的浏览器，元素内部的文本内容会作为降级显示。

7. 总结

<progress> 是一个轻量、语义化的原生进度条元素，适合绝大多数进度展示场景。掌握它的两个核心属性、CSS 自定义技巧以及动态更新方法，就能在项目中灵活运用。如果只是展示静态度量值，记得改用 <meter> 元素。