HTML5 元素必须设置 value 和 max 属性才可见；value 需为 0–max 间的数字，推荐显式声明 max；Flex/Grid 中需设 min-width: 0 以正确缩放；JS 更新应直接赋值 element.value 而非 setAttribute；IE 降级须用语义化 div[role="progressbar"] 配合 ARIA 属性。
HTML5 <progress></progress> 元素必须有 value 和 max 才会显示进度
直接写 <progress></progress> 在页面上是空白的，连轮廓都可能不渲染——浏览器需要明确知道当前值和总量。很多初学者卡在这一步，以为标签没生效，其实是漏了必要属性。
实操建议：
-
value必须是数字，且 ≥ 0、≤max；超出范围会导致行为不可靠（如 Chrome 会显示为 0% 或 100%，但无标准定义） -
max默认为 100，但显式写出更安全，尤其当后端返回的是 0–1 小数时，应先乘 100 再赋给value - 不要用 CSS 的
content或伪元素“模拟”进度条，<progress></progress>原生支持语义化和无障碍（AT 可读），替换掉就失去意义
在 Flex/Grid 布局中控制 <progress></progress> 宽度容易失效
常见错误是给 <progress></progress> 直接设 width: 100%，却发现它只占父容器一半——这是因为原生 <progress></progress> 在不同浏览器里默认 min-width 不同（Chrome 约 120px，Firefox 更小），而 Flex/Grid 的收缩逻辑会优先尊重这个最小宽度。
解决方法：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对
<progress></progress>显式设置min-width: 0（Flex 项）或min-width: 0+width: 100%（Grid 项） - 避免用
flex: 1包裹<progress></progress>而不重置min-width，否则在窄屏下仍会溢出 - 如果需响应式缩放，推荐用
max-width配合width: 100%，而不是固定像素值
动态更新 <progress></progress> 时别直接操作 DOM 属性
写 progressEl.setAttribute('value', 65) 看似可行，但会绕过浏览器内部状态同步机制，导致样式刷新延迟、progress.value 读取不准，甚至触发重复渲染。
正确做法：
- 始终用 JS 属性赋值：
progressEl.value = 65（自动触发重绘和无障碍更新） - 批量更新时，先改
value，再改max（顺序不能反，否则可能触发非法值校验） - 若配合动画（如从 0 到 80），用
requestAnimationFrame逐帧更新，避免直接setTimeout+ 大步长跳变
IE 不支持 <progress></progress>，降级方案要真正可用
不是加个 <!--[if IE]>...<![endif]--> 就完事。IE 下 <progress></progress> 会被忽略，内容不渲染，也无 fallback 文本。
实用降级策略：
- 用
<div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span>65%</span></div>结构，再配 CSS 模拟条形（background+width） - JS 检测：
typeof document.createElement('progress').value === 'number'，为false时插入降级 DOM - 避免用 SVG 或 Canvas 降级——增加体积，且对屏幕阅读器支持弱于语义化 HTML
进度条真正的难点不在视觉实现，而在值来源是否可信、更新时机是否与业务逻辑对齐、以及在各种缩放/高对比度/读屏模式下的表现一致性。别让它变成一个只会动、但没人知道动得对不对的装饰品。
