应使用<div>容器包裹<button>和<progress>，通过CSS定位对齐；<progress>需设max="100"、初始value="0"，禁用内联嵌套；须重置各浏览器伪元素样式，动态更新时用Math.min/max校验值，并同步更新aria-valuetext与按钮禁用状态。
用 <progress> + 按钮组合实现基础状态联动
原生 <progress> 元素语义清晰、可访问性好，直接嵌套在按钮内或紧邻按钮即可形成“带进度的按钮”视觉结构。关键不是强行把进度条塞进 <button> 标签（HTML 规范禁止在 <button> 里放 <progress>），而是用容器包裹两者，并通过 CSS 定位对齐。
常见错误是直接写：<button><progress value="30"></progress>上传</button> —— 这会触发 HTML 验证警告，且部分浏览器渲染异常。
- 正确结构：用
<div class="btn-with-progress">包裹<button>和<progress>，再用 CSS 绝对定位让<progress>贴在按钮底部或覆盖层 -
<progress>必须设max（通常为100），否则显示为“不确定进度”状态 - 初始
value设为0或省略，避免加载即显示 50% - 按钮点击后才启动 JS 更新
value，不要在页面加载时就自动跑进度
CSS 控制进度条贴合按钮外观的关键样式
原生 <progress> 在不同浏览器中默认高度、圆角、颜色差异大，必须重置 appearance 并手动定义尺寸和颜色，否则和按钮风格割裂。
容易踩的坑：只改 background-color，却没处理 Chrome 的 ::-webkit-progress-bar 和 Firefox 的 ::-moz-progress-bar 伪元素，导致进度填充色不生效。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 统一重置：
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 4px; border-radius: 2px; } - 填充色控制（Chrome）：
progress::-webkit-progress-value { background-color: #2196F3; } - 填充色控制（Firefox）：
progress::-moz-progress-bar { background-color: #2196F3; } - 背景色控制（Chrome）：
progress::-webkit-progress-bar { background-color: #e0e0e0; } - 若按钮高 40px，建议
<progress>高 3–4px，放在按钮下方 4px 处，用margin-top或position: absolute对齐
JavaScript 动态更新 value 时的节奏与边界处理
用 setInterval 递增 <progress> 的 value 最常用，但硬编码每 100ms 加 1 容易卡顿或超限——尤其当后端返回真实进度时，需兼容非整数、跳变、中断等场景。
典型错误：写 if (value >= 100) { elem.value = 100; clearInterval(timer); }，但没考虑 value 可能被外部逻辑设为 105，导致 UI 显示溢出。
- 安全更新方式：
elem.value = Math.min(Math.max(newValue, 0), elem.max); - 避免固定间隔：用
requestAnimationFrame替代setInterval更流畅，尤其在低性能设备上 - 真实业务中，进度常来自 XHR
upload.onprogress或 FetchReadableStream，此时应直接赋值服务端返回的百分比，而非模拟 - 按钮文字需同步变化：从“上传” → “上传中…” → “完成”，用
button.textContent控制，别只改进度条
禁用状态与可访问性必须同步处理
进度进行中，按钮必须设 disabled，否则用户可能重复点击；但仅加 disabled 不够——屏幕阅读器仍可能聚焦到 <progress>，而它当前没有 aria-valuetext 描述。
忽略这点会导致 WCAG 4.1.2 合规失败，视障用户无法得知“上传已完成 73%”。
- 按钮禁用同时，给
<progress>添加：aria-valuetext="上传已完成 73%" - 每次更新
value时，动态刷新aria-valuetext，内容要自然（如“已上传 2.4 MB，共 3.6 MB”比纯百分比更友好） - 进度结束时，移除
disabled，并把按钮文字恢复为“重新上传”或跳转链接，而不是留空或隐藏 - 不要用
visibility: hidden隐藏进度条——这会让辅助技术完全忽略它；用display: none或控制其父容器显隐
<progress> 是否归零？aria-valuetext 是否清空？这些细节不处理，用户反复操作时就会出现“按钮灰了但进度条还停在 100%”或“读屏器一直念‘已完成’却无法触发新上传”的问题。 
