progress标签是HTML5用于展示确定性任务进度的语义化元素，需通过JavaScript动态更新value属性实现动画，省略value则进入不确定模式，支持CSS定制和可访问性增强。
progress 标签是 HTML5 原生提供的语义化进度指示器，专用于展示**确定性任务**（即知道总工作量和当前完成量）的执行进度，比如文件上传、数据加载、安装过程等。它本身不执行任何逻辑，只负责可视化呈现，需配合 JavaScript 动态更新属性才能实现“动态”效果。
基础用法：设置 value 和 max
progress 元素有两个关键属性：
- value：当前完成值（必须在 0 到 max 之间）
- max：任务总量（默认为 100；若省略，浏览器按 0–1 区间解释 value）
示例（静态展示 65% 进度）：
用 JavaScript 实现动态更新
要让进度条“动起来”，需在任务执行过程中定时或事件触发时修改 value 属性。常见做法是配合 setInterval 模拟，或在真实异步操作（如 fetch、XMLHttpRequest）中根据响应更新。
立即学习“前端免费学习笔记（深入）”；
简单模拟示例：
<script><br> const bar = document.getElementById('myProgress');<br> let current = 0;<br> const timer = setInterval(() => {<br> if (current >= 100) {<br> clearInterval(timer);<br> return;<br> }<br> current++;<br> bar.value = current;<br> }, 100);<br></script>
处理不确定进度（使用 indeterminate 模式）
当无法预估剩余时间或总工作量时（例如“正在连接…”），可省略 value 属性，浏览器会显示循环动画（无具体数值）：
这种状态不能通过 JS 设置 value 来激活——只要 value 缺失或无效（如负数、NaN），就自动进入不确定模式。
样式定制与可访问性提示
progress 默认外观由浏览器决定，可用 CSS 修改（注意各浏览器伪元素不同）：
- WebKit/Blink（Chrome/Safari）：
progress::-webkit-progress-bar和progress::-webkit-progress-value - Firefox：
progress::-moz-progress-bar
为提升可访问性，建议添加关联文字说明，例如：
上传中：0%
<script><br> const bar = document.getElementById('uploadBar');<br> const text = document.getElementById('progressText');<br> bar.addEventListener('value', () => {<br> text.textContent = Math.round(bar.value) + '%';<br> });<br></script>
