<progress>-进度条

<progress> 标签用于在网页中显示任务的完成进度。它通常用于文件上传、下载或任何需要可视化进度的场景。这个标签简单易用，但支持多种属性和样式定制。

<progress> 的基本用法

<progress> 标签有两个主要属性：

• value：表示当前进度值
• max：表示进度最大值

如果没有指定 max 属性，默认值为 1。value 必须在 0 和 max 之间。

<progress value="50" max="100"></progress>

这个例子会显示一个完成 50% 的进度条。浏览器会自动渲染进度条的样式，包括已完成和未完成部分的颜色。

不确定状态下的进度条

当进度无法确定时，可以省略 value 属性，这样进度条会显示为不确定状态（通常是动画效果）。

<progress max="100"></progress>

不同浏览器对不确定状态的表现可能不同。Chrome 和 Firefox 会显示一个左右移动的动画，而 Safari 可能显示为条纹动画。

样式定制

虽然浏览器提供了默认样式，但我们可以使用 CSS 来自定义进度条的外观。需要注意的是，不同浏览器对进度条的样式支持可能不同。

/* 整个进度条的样式 */
progress {
  width: 300px;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

/* WebKit 浏览器（Chrome, Safari）的样式 */
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #4CAF50;
  border-radius: 10px;
}

/* Firefox 的样式 */
progress::-moz-progress-bar {
  background-color: #4CAF50;
  border-radius: 10px;
}

JavaScript 动态控制

我们可以使用 JavaScript 动态更新进度条的值，这在文件上传等场景中非常有用。

<progress id="fileProgress" value="0" max="100"></progress>
<button onclick="updateProgress()">增加进度</button>

<script>
  function updateProgress() {
    const progressBar = document.getElementById('fileProgress');
    if (progressBar.value < progressBar.max) {
      progressBar.value += 10;
    } else {
      progressBar.value = 0;
    }
  }
</script>

实际应用示例

文件上传进度

<input type="file" id="fileUpload">
<progress id="uploadProgress" value="0" max="100"></progress>

<script>
  document.getElementById('fileUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const progressBar = document.getElementById('uploadProgress');
    
    // 模拟上传过程
    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 10;
      progressBar.value = progress;
      
      if (progress >= 100) {
        clearInterval(interval);
        progressBar.value = 100;
        alert('上传完成！');
      }
    }, 500);
  });
</script>

页面加载进度

<progress id="pageLoadProgress" max="100"></progress>

<script>
  window.addEventListener('load', function() {
    const progressBar = document.getElementById('pageLoadProgress');
    let progress = 0;
    
    // 模拟资源加载
    const interval = setInterval(() => {
      progress += 10;
      progressBar.value = progress;
      
      if (progress >= 100) {
        clearInterval(interval);
      }
    }, 300);
  });
</script>

无障碍访问考虑

为了确保进度条对所有用户都可用，应该添加适当的 ARIA 属性和标签。

<progress id="taskProgress" value="35" max="100" 
          aria-labelledby="progressLabel">
</progress>
<span id="progressLabel">当前任务进度：35%</span>

浏览器兼容性

<progress> 标签在现代浏览器中得到广泛支持，包括：

• Chrome 8+
• Firefox 16+
• Safari 6+
• Edge 12+
• Opera 11+

对于不支持 <progress> 的旧版浏览器，可以使用 <div> 元素配合 JavaScript 来模拟进度条功能。

替代方案比较

虽然 <progress> 标签很方便，但在某些情况下可能需要考虑替代方案：

1. 复杂样式需求：如果需要完全自定义的进度条样式，可能需要使用 <div> 和 CSS 来构建
2. 动画效果：<progress> 的动画能力有限，复杂动画需要其他解决方案
3. 旧版浏览器支持：虽然罕见，但某些旧系统可能需要回退方案

<!-- 回退方案示例 -->
<progress id="myProgress" value="50" max="100">
  <div class="progress-container">
    <div class="progress-bar" style="width: 50%"></div>
  </div>
</progress>

<style>
  .progress-container {
    width: 300px;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 100%;
    background: #4CAF50;
    border-radius: 10px;
  }
</style>

性能考虑

<progress> 标签由浏览器原生实现，通常比 JavaScript 实现的进度条性能更好。在需要频繁更新进度值的场景中，原生进度条能提供更流畅的动画效果。

与其他进度指示器的区别

HTML 还提供了 <meter> 标签，它与 <progress> 类似但有重要区别：

• <progress> 用于表示任务的完成进度
• <meter> 用于表示标量测量值或分数值

<!-- 进度条 -->
<progress value="75" max="100"></progress>

<!-- 计量器 -->
<meter value="6" min="0" max="10">6 out of 10</meter>

移动端注意事项

在移动设备上使用 <progress> 时，需要考虑：

1. 触摸目标大小：确保进度条足够大，便于触摸交互
2. 性能：移动设备可能对频繁的 DOM 更新更敏感
3. 样式一致性：不同移动浏览器可能有不同的默认样式

/* 移动端优化样式 */
progress {
  width: 100%;
  height: 30px; /* 更大的触摸目标 */
}

高级用法：分段进度条

虽然 <progress> 本身不支持分段显示，但可以通过 CSS 伪元素模拟这种效果。

<progress class="segmented" value="65" max="100"></progress>

<style>
  progress.segmented {
    --segment-width: 20px;
    --segment-gap: 5px;
  }
  
  progress.segmented::-webkit-progress-value {
    background-image: linear-gradient(
      90deg,
      #4CAF50 var(--progress-percent),
      transparent var(--progress-percent)
    );
    background-size: calc(var(--segment-width) + var(--segment-gap)) 100%;
  }
</style>