progress标签仅显示已知总工作量任务的确定进度，需显式设置max和数值型value，javascript更新须直接赋值value属性，自定义样式须按浏览器前缀分别处理伪元素。
progress 标签只干一件事：在语义正确的前提下，显示「已知总工作量的任务」当前完成到哪了。它不是加载动画，不能自动动，也不该用来模拟“正在努力中”的模糊状态。
为什么progress设了value还是不显示？
最常见原因是缺 max 或值类型不对：
-
max必须显式写出，不能依赖默认值——哪怕你只想用 0–1 区间，也得写max="1"，否则部分浏览器（如 Safari）可能不渲染确定进度 -
value和max都必须是数字，value="50%"、value="fifty"、value=""全部无效；字符串数字如"75"虽能被隐式转换，但建议统一用数值字面量75 - 如果
value未设置、为负数、或大于max，浏览器会 fallback 到不确定状态（动画条纹），这不是 bug，是规范行为
用 JavaScript 更新progress时为什么不动？
因为你在改 DOM 属性，但没走对路子：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 别用
el.setAttribute('value', '65')—— 它只改 HTML attribute，不触发 UI 重绘 - 别用
el.innerHTML = '...'替换整个标签 —— 会丢事件监听、破坏可访问性、引发重排 - 正确做法是直接赋值 DOM property：
progressEl.value = 65（注意不是字符串） - 真实场景中，
value应来自实际进度反馈，比如XMLHttpRequest.upload.onprogress的event.loaded / event.total计算结果；fetch目前无法获取上传进度，别硬套
自定义样式为什么只在 Chrome 生效？
因为各浏览器用的伪元素名和生效条件完全不同，漏一条就全白搭：
- 必须先写
progress { appearance: none; }，否则 WebKit/Firefox 的伪元素样式压根不生效 - Chrome/Safari 用
progress::-webkit-progress-bar控制轨道，progress::-webkit-progress-value控制填充条 - Firefox 只认
progress::-moz-progress-bar，不支持::-webkit-前缀，也不支持::progress-value（目前仍是实验性） - 别给
progress本身设background-color或color—— 它不渲染文本，这些属性无效；圆角要分别加在轨道和填充条上，且高度需匹配，否则裁边
最容易被忽略的一点：当 value 超过 max 时，视觉上会卡在 100%，但 progressEl.value 仍返回原始超限值。如果你靠这个判断“是否完成”，逻辑就会出错——得同时检查 progressEl.value >= progressEl.max。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
