最直接用<progress>标签，但IE9及更早不支持；CSS自定义推荐Flex布局，连接线用伪元素，当前步骤必加aria-current="step"和tabindex="0"，JS控制宜用CSS变量或transform: scaleX()。

用 <progress> 标签最直接，但浏览器兼容性要注意

现代浏览器原生支持 <progress>，写法极简：

<progress value="65" max="100"></progress>

它会自动渲染为带填充的进度条。但注意 IE 9 及更早版本完全不支持，Edge 12–18 虽支持但样式难定制；如果项目需兼容旧版 IE，得换方案。

用 CSS 自定义步骤条时，display: flex 是最稳的布局方式

步骤条本质是多个状态节点 + 连接线，用 Flex 布局能自然对齐、等分间距，且响应式友好。关键点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 父容器设 display: flex 和 justify-content: space-between
• 每个步骤项用 flex: 0 0 auto 防止缩放变形
• 连接线用伪元素 ::after 绘制，宽度固定为 calc(100% - 40px)（预留左右节点空间）
• 当前步骤用 data-status="active" 控制颜色和图标，别依赖 class 名硬编码，方便 JS 动态切换

aria-current="step" 不是可有可无的装饰

屏幕阅读器需要明确知道当前进行到哪一步。只靠视觉样式（比如加粗或高亮）无法被读屏软件识别。必须给当前步骤节点加上 aria-current="step" 属性，例如：

<li aria-current="step">填写信息</li>

同时建议配合 tabindex="0"，让键盘用户能聚焦并听到完整描述。漏掉这个，无障碍测试会直接报错。

JS 控制进度时，避免直接操作 style.width 改变填充

动态更新进度（比如表单每步提交后）时，用 CSS 变量或 transform: scaleX() 比直接改 width 更平滑、不触发重排：

• 推荐：给进度条容器设 --progress: 0.65，然后在 CSS 里写 transform: scaleX(var(--progress))
• 慎用：直接 element.style.width = '65%'，在动画中易卡顿，且和 transition 冲突
• 注意：若用 <progress> 标签，应始终通过修改 value 属性来驱动，而不是绕过语义去动内联样式

真正难的不是画出形状，而是让每一步的状态变化既准确又可访问。