progress标签必须同时设置合法value和max属性才能显示确定进度；缺一、值非法（如字符串、越界）、用setAttribute更新或IE11以下浏览器均导致空白或不确定状态。
progress 标签本身就能渲染进度条，但只写 <progress></progress> 是看不见的——它必须同时有合法的 value 和 max 才显示确定进度。
为什么写了 <progress> 却没显示进度？
核心原因就一个：缺 value 或 max，或者值不合法。
-
<progress value="65"></progress>→ 缺max，浏览器按默认max="100"处理，但部分 Safari/旧 UA 会直接空白或进不确定状态 -
<progress max="100"></progress>→ 缺value，始终显示 0% -
<progress value="0.72" max="1"></progress>→ 合法（小数量纲一致），显示 72%；但若写成value="72" max="1"就溢出，被截断为 100% -
value必须是数字，"72"字符串赋值无效；setAttribute('value', '72')也不触发重绘
用 JavaScript 动态更新 progress.value 的正确姿势
不是“怎么让进度动起来”，而是“怎么让它动得准、不卡、不误导”。
- 直接赋值 DOM 属性：
bar.value = Math.round(loaded / total * 100)，不是setAttribute，也不是改innerHTML - 避免高频更新：每 30ms 写一次
value在低端设备上可能掉帧，建议 ≥ 50ms 间隔，或加变更阈值（如Math.abs(newVal - bar.value) >= 1才写） - 上传场景优先用原生事件：
xhr.upload.onprogress = e => { bar.value = Math.round(e.loaded / e.total * 100); } - 别用
setInterval模拟进度——除非你真在做假进度条（但语义错误，辅助技术用户会被误导）
CSS 自定义 progress 样式为什么总失效？
因为各浏览器根本不共享同一套伪元素规则，漏写任一引擎的规则，那一部分就回退到丑默认样式。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须先重置：
progress { appearance: none; -moz-appearance: none; } - Chrome/Edge/Safari（WebKit）：
progress::-webkit-progress-bar控轨道背景，progress::-webkit-progress-value控填充色和圆角 - Firefox：
progress::-moz-progress-bar是唯一可用伪元素，不能分设轨道/填充，整个条一起染色 - 不要给
progress设font-size或指望color改填充色——它不渲染文字，这些属性无效 - 别用
transform: scaleX()动画填充效果，它不触发重绘；改value本身才会驱动真实进度变化
容易被忽略的语义与可访问性细节
进度条不是视觉装饰，它是 role="progressbar"，屏幕阅读器靠它播报状态。光有 value 和 max 不够。
-
<progress value="72" max="100" aria-label="文件上传进度"></progress>是基础，但还不够 - 必须同步设置 ARIA 属性：
el.setAttribute('aria-valuenow', current)、'aria-valuemin'、'aria-valuemax'、'aria-valuetext'（如"72% 完成"） - 不要把百分比写在
<progress>72%</progress>里——那是 fallback 内容，屏幕阅读器不读，CSS 也控制不了显示 - IE11 及更早版本完全不支持
progress，需用div+role="progressbar"+ 手动管理 ARIA 属性降级
真正难的从来不是“怎么画一条蓝条”，而是准确定义“100%”在业务中意味着什么，以及确保这个含义能被所有人——包括键盘用户、放大镜用户、屏幕阅读器用户——无歧义地感知到。
