<progress>-进度条

<progress> 标签用于在网页中显示任务的完成进度。它通常表现为一个横向的条形区域，填充比例反映当前进度值。这个元素既支持确定进度（已知总量），也支持不确定进度（未知总量），适合文件上传、表单填写等场景。

<progress> 的基本语法

<progress> 是一个双标签，基本结构如下：

<progress value="当前值" max="最大值"></progress>

• value：当前进度值（必须为有效浮点数）
• max：总进度值（默认为1.0）

当不指定value时，进度条会显示为不确定状态（不同浏览器表现为条纹动画或静态灰色）：

<!-- 不确定进度 -->
<progress></progress>

属性详解

核心属性

1. value
   当前完成值，必须小于等于max。若省略则进入不确定状态。

2. max
   总进度值，必须为正数。默认1.0，此时value范围是0.0~1.0。

全局属性

支持所有HTML全局属性如id、class、style等：

<progress 
  id="fileProgress" 
  class="custom-bar" 
  style="width: 300px"
  value="35" 
  max="100">
</progress>

浏览器渲染差异

不同浏览器对<progress>的默认样式差异较大：

可通过CSS统一样式：

/* 所有浏览器进度条统一为红色 */
progress {
  appearance: none;
  height: 20px;
}
progress::-webkit-progress-bar {
  background: #f0f0f0;
}
progress::-webkit-progress-value {
  background: #ff4d4d;
}
progress::-moz-progress-bar {
  background: #ff4d4d;
}

实际应用示例

文件上传进度

配合JavaScript动态更新：

<progress id="uploadProgress" value="0" max="100"></progress>
<button onclick="simulateUpload()">开始上传</button>

<script>
function simulateUpload() {
  const progressBar = document.getElementById('uploadProgress');
  let progress = 0;
  
  const interval = setInterval(() => {
    progress += Math.random() * 10;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }
    progressBar.value = progress;
  }, 500);
}
</script>

多阶段任务进度

分段进度显示：

<progress id="multiStepProgress" max="3"></progress>
<div>
  <button onclick="nextStep(1)">步骤1</button>
  <button onclick="nextStep(2)">步骤2</button>
  <button onclick="nextStep(3)">步骤3</button>
</div>

<script>
function nextStep(step) {
  document.getElementById('multiStepProgress').value = step;
}
</script>

无障碍访问建议

1. 始终关联<label>：

   <label for="taskProgress">当前任务进度：</label>
   <progress id="taskProgress" value="50" max="100">50%</progress>
   

2. 为不支持元素的老旧浏览器提供回退内容：

   <progress value="75" max="100">
     <span class="fallback">75%</span>
   </progress>
   

与<meter>的区别

示例对比：

<!-- 进度条：表示正在进行的任务 -->
<progress value="65" max="100"></progress>

<!-- 度量条：表示静态数值 -->
<meter value="6" min="0" max="10">6/10</meter>

动态样式控制技巧

通过JavaScript修改样式类实现状态变化：

<style>
  .progress-danger::-webkit-progress-value {
    background: #dc3545;
  }
  .progress-warning::-webkit-progress-value {
    background: #ffc107;
  }
</style>

<progress id="statusProgress" value="40" max="100"></progress>
<button onclick="setProgressClass('danger')">危险状态</button>
<button onclick="setProgressClass('warning')">警告状态</button>

<script>
function setProgressClass(type) {
  const bar = document.getElementById('statusProgress');
  bar.className = `progress-${type}`;
}
</script>

框架中的使用示例

React 组件

function ProgressComponent() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prev => (prev >= 100 ? 0 : prev + 10));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <progress 
      value={progress} 
      max="100"
      aria-label="处理进度"
    />
  );
}

Vue 指令

<template>
  <progress 
    :value="currentProgress" 
    max="100"
    @click="handleClick"
  ></progress>
</template>

<script>
export default {
  data() {
    return { currentProgress: 0 }
  },
  methods: {
    handleClick() {
      this.currentProgress += 10;
    }
  }
}
</script>

移动端适配要点

1. 触控区域：确保进度条高度不小于44px（苹果人机指南建议）

   progress {
     min-height: 44px;
     width: 100%;
   }
   

2. 动画性能：避免使用box-shadow等耗性能的属性

3. 横屏适配：

   @media (orientation: landscape) {
     progress {
       width: 70vh;
     }
   }
   

与后端API的集成

实时获取进度示例（使用Fetch API）：

const progressBar = document.querySelector('#apiProgress');

async function fetchProgress() {
  const response = await fetch('/api/progress');
  const data = await response.json();
  
  progressBar.value = data.current;
  progressBar.max = data.total;
  
  if (data.current < data.total) {
    setTimeout(fetchProgress, 1000);
  }
}

自定义动画效果

实现脉冲动画：

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

progress[value]::-webkit-progress-value {
  animation: pulse 2s infinite;
}

浏览器兼容性数据

对于IE9及以下，推荐使用polyfill：

<!-- 引入progress-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/progress-polyfill@1.0.3/dist/progress.min.js"></script>