HTML5原生<progress>元素可直观展示任务进度，支持CSS定制样式、JavaScript动态更新、requestAnimationFrame平滑动画及结合XMLHttpRequest实现文件上传实时进度。
如果您希望在网页中直观展示任务完成进度，HTML5 提供了原生的 <progress> 元素，同时支持通过 CSS 样式定制外观、结合 JavaScript 实现动态更新。以下是实现 HTML5 进度条组件的具体方法：
一、使用原生 <progress> 元素创建基础进度条
HTML5 内置的 <progress> 标签语义明确，浏览器自动识别其为进度指示器，具有默认可访问性支持和跨平台渲染一致性。它通过 value 和 max 属性控制当前值与最大值，不设置 value 时显示为不确定状态。
1、在 HTML 文件中插入 <progress> 标签，并指定 max 值为 100。
2、设置初始 value 值为 0，表示进度从零开始。
立即学习“前端免费学习笔记（深入）”；
3、为该元素添加 id 属性（例如 id="loadingBar"），便于后续 JavaScript 操作。
4、在页面中直接渲染后，即可看到浏览器默认样式的进度条，无需额外 JavaScript 即可显示静态进度。
二、通过 CSS 自定义进度条样式
原生 <progress> 在不同浏览器中默认样式差异较大，且无法直接用常规 CSS 选择器修改内部轨道和填充色。需借助伪元素（如 ::-webkit-progress-bar、::-moz-progress-bar）进行针对性覆盖，确保视觉统一。
1、为 <progress> 元素设置 width 和 height，定义整体尺寸。
2、使用 ::-webkit-progress-bar 选择器设置 Chrome/Safari 中背景轨道的背景色与圆角。
3、使用 ::-webkit-progress-value 选择器设置 Chrome/Safari 中已填充部分的颜色、过渡动画及圆角。
4、使用 ::-moz-progress-bar 选择器设置 Firefox 中填充区域的背景色。
5、为兼容性考虑，必须为每种主流引擎分别声明样式规则，否则部分浏览器将回退至默认外观。
三、用 JavaScript 动态更新进度值
静态进度条缺乏交互感，通过 setInterval 或事件触发机制实时修改 value 属性，可模拟加载、上传、计算等真实场景。value 值必须介于 0 到 max 之间，超出范围将被截断或忽略。
1、获取 progress 元素的 DOM 引用，例如 document.getElementById("loadingBar")。
2、定义一个起始值变量（如 current = 0）和目标值（如 target = 85）。
3、使用 setInterval 启动定时器，每次执行时将 current 加 1，并赋值给 progress.value。
4、当 current 达到 target 时，调用 clearInterval 清除定时器，停止更新。
5、每次修改 value 后，浏览器会自动重绘进度条，无需手动触发渲染。
四、用 requestAnimationFrame 实现更平滑的动画效果
相比 setInterval，requestAnimationFrame 由浏览器统一调度，能根据屏幕刷新率调整执行频率，避免丢帧或卡顿，特别适合对动画流畅度要求较高的进度条场景。
1、定义一个 animateProgress 函数，接收当前值、目标值、DOM 元素作为参数。
2、在函数内判断当前值是否小于目标值，若是，则每次增加 0.8 并更新 progress.value。
3、若未达目标，调用 requestAnimationFrame(animateProgress) 继续循环。
4、为防止浮点误差导致无法精确到达目标，添加 Math.min(current + 0.8, target) 边界控制。
5、该方式在高负载设备上仍能保持稳定帧率，且功耗低于高频 setInterval。
五、结合表单提交模拟上传进度
真实文件上传中，XMLHttpRequest 的 upload.onprogress 事件可捕获已传输字节数，结合服务器返回的总大小，即可计算出实时进度百分比并同步更新进度条。
1、创建 FormData 对象并追加待上传文件。
2、初始化 XMLHttpRequest 实例，监听 upload.onprogress 事件。
3、在事件回调中，读取 event.loaded（已上传字节）和 event.total（总字节），计算 percentage = Math.round((loaded / total) * 100)。
4、将 percentage 赋值给 progress.value，触发 UI 更新。
5、注意：仅当服务端正确设置 Access-Control-Allow-Origin 且响应包含 Content-Length 时，event.total 才有效。
