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

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

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

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

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

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

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 父容器设 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" 属性，例如：

填写信息

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

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

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

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！