progress标签需设value和max才显示有效进度，否则为不确定状态；CSS自定义需兼容各浏览器伪元素；JS更新value可读写但无默认动画；无障碍需手动添加aria属性。
progress标签的基本用法和必要属性
progress 是原生语义化进度条元素，不需要 JavaScript 就能渲染，但必须设置 value 和 max 才能显示有效进度。只写 <progress></progress> 会呈现为“不确定”状态（部分浏览器显示为动画横条），这容易被误认为加载中——其实它只是没设值。
-
value必须是数字，且 ≥ 0、≤max，否则进度条不更新或显示为空白 -
max默认是 100，但可以设为任意正数，比如设max="200"时value="50"表示 25% - 不支持直接用 CSS 设置
width控制长度，得靠外层容器或 display + width 配合
如何用CSS自定义progress的样式
浏览器对 progress 的默认样式差异很大：Chrome 支持 ::-webkit-progress-bar 和 ::-webkit-progress-value，Firefox 用 ::progress-bar（仅部分版本）和 ::progress-value，Safari 则基本只认 WebKit 伪元素。纯 CSS 覆盖必须分情况处理。
- Chrome/Edge/Safari 下，用
progress::-webkit-progress-bar控制背景，progress::-webkit-progress-value控制已填充部分 - Firefox 117+ 开始支持
progress::progress-bar，但旧版完全忽略，所以实际项目中建议 fallback 到 background 渐变或 JS 模拟 - 不要尝试用
transform: scaleX()动画 value，它不会触发重绘；改value属性本身才会驱动进度变化
progress {
height: 8px;
border-radius: 4px;
overflow: hidden;
}
progress::-webkit-progress-bar {
background-color: #e0e0e0;
}
progress::-webkit-progress-value {
background-color: #4caf50;
border-radius: 4px;
}用JavaScript动态更新progress的value
progress 的 value 属性可读可写，但直接赋值不会触发动画；要实现平滑效果，得配合 requestAnimationFrame 或 CSS transition（仅限部分浏览器支持 value 的过渡）。
- 修改
progress.value = 65立即生效，但视觉上是跳变 - 若想渐进，推荐用 JS 控制一个中间变量，再定时更新
value，而不是依赖 CSStransition（它在多数浏览器里对value无效） - 注意：设置
value超出max会静默截断，不会报错，但 UI 停在 100%
常见错误：监听 input 或 change 事件——progress 不触发这些事件；它只响应属性变更，如需反馈，得自己加逻辑判断前后值差异。
立即学习“前端免费学习笔记（深入）”；
progress与aria-label、无障碍支持
progress 是可访问元素，但默认没有文本说明，屏幕阅读器只会读“progressbar”，不读当前值。必须手动加 aria-valuenow、aria-valuemin、aria-valuemax，或者用 aria-labelledby 关联外部文本。
- 即使设置了
value和max，也得同步更新aria-valuenow，因为某些读屏器不自动读取 DOM 属性变化 - 不要用
title属性替代 aria 属性，它只在悬停时显示，对键盘或语音用户无效 - 如果进度条表示“上传中”，建议额外加一句
<p id="upload-status">上传中：32%</p>并用aria-labelledby="upload-status"关联
有些场景下，比如异步任务无法预估总耗时，progress 就不该硬套 max/value；这时用 <progress indeterminate></progress> 更合适——但要注意，这个布尔属性在 HTML 中只需写 indeterminate，不用赋值。
