应优先使用原生 标签而非手写 div+JS；必须同时设置 value 和 max 才显示确定进度，max 默认为 1 但建议显式声明；value 需为数字且在 [0, max] 范围内；JS 更新须直接赋值数字，不可用字符串；CSS 定制需通过伪元素并重置 appearance: none；辅助功能需依赖 aria-label 和 aria-live，不可靠 innerHTML 或颜色传达状态。
直接用 标签，别手写 div + JS 模拟——除非你要支持 IE11 或需要像素级动画控制。
必须同时设 value 和 max 才显示确定进度
只写 或只设 value，浏览器会进“不确定”状态（条纹动画），这不是 bug，是规范行为。它不表示“正在加载”，只是告诉你“进度未知”。
-
max默认是1，但显式写上更安全，尤其当后端返回小数时（比如value="0.72"） -
value必须是数字，且 ≥ 0、≤max；超出范围会被自动截断（value=120、max=100→ 显示满格） - 不要省略
max：封装 React/Vue 组件时，漏传max是最常见空白条原因
JS 更新 value 必须赋值数字，不能用字符串
progress.value = "50" 不触发重绘，进度条不动；progress.setAttribute('value', '50') 也无效——它只改 HTML 属性，不更新 DOM 的 value 值。
- 从
读值后记得Number(input.value)或+input.value - 用
fetch上传时，从XMLHttpRequest.upload.onprogress的event.loaded / event.total算出百分比，再转成整数填入bar.value - 不要在循环里频繁设
value（如每 10ms 一次），浏览器有渲染节流，建议间隔 ≥ 50ms
CSS 自定义必须靠伪元素，各浏览器写法不同
progress 本身不渲染文本，也不能用 color 或 background-color 直接改填充色。WebKit/Firefox 都要单独处理，且 IE 完全不支持伪元素定制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先写
appearance: none，否则 WebKit 下伪元素不生效 - Chrome/Safari 用
progress::-webkit-progress-bar控轨道，progress::-webkit-progress-value控填充 - Firefox 只认
progress::-moz-progress-bar，不支持分开设轨道/填充色 - 别给
progress设font-size——它不显示文字，这个属性没意义
辅助文本和可访问性不能靠 innerHTML
中的 “70%” 默认不可见，也不能被屏幕阅读器识别为进度值。它只是 fallback 内容，仅当浏览器完全不支持 progress 时才显示。
- 用
aria-label或aria-labelledby明确任务类型，例如： - 旁边放一个同步更新的
，并加aria-live="polite"，让屏幕阅读器播报变化 - 避免仅用颜色表达状态（比如“红色=失败”），色觉障碍用户看不到区别
真正容易被忽略的是：progress 不是 loading 动画替代品，也不该用来显示磁盘使用率这类静态度量——前者该用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
