<progress> 是一个用于显示任务完成进度的 HTML5 语义化标签。它支持确定进度（通过 value 和 max 指定具体数值）和不确定进度（无value，仅显示动画，表示等待中）两种状态。通过 CSS 伪元素可以深度定制外观，同时内置了可访问性支持。适用于文件上传、数据加载、多步骤引导、视频缓冲等场景。

在网页应用中，用户执行文件上传、表单提交、内容加载等操作时，如果能清晰地看到当前进展，会感到更加安心和可控。HTML 的 <progress> 元素正是为此而生——它原生、语义化、易用，只需几行代码就能为你的应用增添专业的进度反馈。本文将从零开始，系统讲解 <progress> 的用法、样式定制、无障碍设计以及实战技巧，帮助你彻底掌握这个实用元素。

一、基础概念与语法

<progress> 元素表示一个任务的完成百分比或进度，浏览器通常会将其渲染为一个进度条。

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

• 如果 value 存在且介于 0 和 max 之间，进度条会显示对应的比例。

• 如果省略 value，进度条会呈现为“不确定”状态（通常为循环动画），表示任务正在进行但无法知道具体进度。

属性详解

小提示：max 默认值为 1，因此若设置 value="0.7" 会显示 70% 进度。但为了代码可读性，推荐始终将 max 设为 100，用百分比思维理解。

二、使用场景与代码示例

1. 确定进度 – 文件上传

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

<script>  let progress = document.getElementById('upload');  let span = document.getElementById('percent');  let val = 0;  let timer = setInterval(() => {    val += 10;    progress.value = val;    span.textContent = val + '%';    if (val >= 100) clearInterval(timer);  }, 500);</script>

2. 不确定进度 – 加载等待

当任务总时长未知时（如网络请求、复杂计算），使用无 value 的 <progress> 提示用户“正在处理”。

<p>正在加载数据，请稍候...</p><progress></progress>

注意：不确定进度条在 Chrome / Firefox 中会显示连续滚动的条纹动画，非常直观。

3. 动态绑定真实数据（模拟 AJAX 请求）

async function loadData() {  const progressBar = document.querySelector('#ajaxProgress');  progressBar.removeAttribute('value'); // 变为不确定状态  try {    const response = await fetch('/api/large-data');    // 假设后端返回总数据量，前端可以逐块接收并更新 value  } finally {    progressBar.value = progressBar.max; // 完成后设为满进度  }}

三、深度样式定制（跨浏览器）

默认的 <progress> 样式在不同浏览器下差异较大，但通过 CSS 伪元素我们可以统一并美化它。

核心知识点

• WebKit/Blink 内核（Chrome、Edge、Safari）支持 ::-webkit-progress-bar（轨道背景）和 ::-webkit-progress-value（进度填充）。

• Firefox 仅支持 ::-moz-progress-bar（直接作用于填充部分，轨道背景需通过 background 设置）。

• 可以通过 appearance: none 移除默认样式，获得更自由的定制空间。

基础美化示例

/* 通用尺寸与圆角 */progress {  width: 100%;  height: 20px;  border-radius: 20px;  overflow: hidden;   /* 保证圆角裁剪 */}

/* WebKit 轨道背景 */progress::-webkit-progress-bar {  background-color: #e9ecef;}

/* WebKit 进度填充 */progress::-webkit-progress-value {  background-color: #4caf50;  border-radius: 20px;  transition: width 0.3s ease;}

/* Firefox 进度填充 */progress::-moz-progress-bar {  background-color: #4caf50;  border-radius: 20px;}

高级渐变与动画

.gradient-progress::-webkit-progress-value {  background: linear-gradient(90deg, #ff6a00, #ee0979);  background-size: 200% 100%;  animation: shimmer 1.5s infinite;}
@keyframes shimmer {  0% { background-position: 0% 0; }  100% { background-position: 200% 0; }}

注意：::-webkit-progress-value 的动画在 Firefox 中无效，因为 Firefox 不支持该伪元素上的动画。如果必须统一效果，建议使用 JavaScript 库或自定义 div 模拟进度条。

四、可访问性（ARIA）增强

虽然 <progress> 自带 role="progressbar"，但为了屏幕阅读器用户能获得更丰富的提示，建议添加文本标签和 ARIA 属性。

<div aria-labelledby="progressLabel">  <span id="progressLabel">文档上传进度</span>  <progress id="docUpload" value="45" max="100" aria-describedby="progressValue"></progress>  <span id="progressValue" aria-live="polite">45%</span></div>

• aria-describedby：指向实时显示百分比的元素，让辅助设备自动读取变化。

• aria-live="polite"：当百分比更新时，屏幕阅读器会在不打断用户的情况下读出新值。

五、与 <meter> 的区别（容易混淆）

简单记忆：需要表达“好坏程度”用 <meter>，需要表达“做了多少”用 <progress>。

六、浏览器兼容性与降级方案

建议访问 Can I Use 网站，以及时了解 progress 属性在各类浏览器中的最新兼容性支持情况。下图数据截至 2026.04.04。

降级方案：在 <progress> 标签内写入备用文本，例如：

<progress value="60" max="100">60% 已完成</progress>

老旧浏览器会直接显示“60% 已完成”，确保基本信息不丢失。

七、最佳实践与常见陷阱

1. 语义正确性

不要将 <progress> 用于仪表盘指标（如 CPU 使用率），那是 <meter> 的职责。

2. 始终提供文本反馈

即使是现代浏览器，也建议在进度条旁边显示百分比或“已完成 X 项 / 共 Y 项”，方便所有人理解。

3. 合理使用不确定状态

只在任务无法预估进度时使用（例如发起异步请求、等待用户操作）。如果任务实际上可以分阶段反馈，应尽量给出具体进度，提升用户体验。

4. 避免依赖仅 WebKit 的样式

如果项目需要兼容 Firefox，请同时提供 ::-moz-progress-bar 样式，或采用 JavaScript 进度库（如 NProgress）。

5. 响应式设计

使用相对宽度（width: 100%），并配合 max-width 限制最大尺寸，确保在手机和宽屏上都有良好表现。

6. 性能注意

频繁更新 value 会引起重绘，但通常不成问题。如果每秒更新数十次，可考虑使用 requestAnimationFrame 节流。

总结

<progress> 元素是一个轻量、原生、语义清晰的进度反馈工具。它原生支持确定与不确定两种状态，搭配 CSS 伪元素可实现高度定制化的视觉效果，结合 ARIA 属性又能确保良好的可访问性。

在实际项目中，无论是简单的文件上传，还是复杂的多步骤任务，合理运用 <progress> 都能让用户界面更专业、友好。记住语义优先、样式渐进增强、兼顾屏幕阅读器，你的进度条将不仅仅是一个条，而是体验的加分项。

阅读原文：原文链接