progress 标签无法自动响应断网状态，必须通过监听 navigator.online 和 online/offline 事件手动切换 class 实现样式变化，并建议结合请求失败逻辑与多维度视觉提示（颜色、边框、文字）提升可靠性与可访问性。
progress 标签本身不支持断网状态自动切换样式
HTML 的 <progress></progress> 是纯展示型元素，没有内置网络状态感知能力。它不会因为 fetch 失败、XMLHttpRequest 中断或 navigator.onLine 变为 false 而自动改变外观——必须手动监听网络变化并更新其 class 或 style。
用 navigator.onLine + class 切换实现断网警告效果
最轻量、兼容性好的做法是监听 window 的 online 和 offline 事件，配合 CSS 定义两种状态样式。注意：navigator.onLine 只能反映浏览器是否认为联网（例如 Chrome 在离线模式下返回 false），但无法 100% 精确判断真实网络中断（如 DNS 失败、防火墙拦截）。
- 给
<progress></progress>添加初始 class，比如class="progress-bar" - 断网时添加
class="warning"，联网时移除 - CSS 中用
.progress-bar.warning覆盖颜色、边框、动画等
<progress class="progress-bar" value="65" max="100"></progress><script>
const bar = document.querySelector('.progress-bar');
const updateStatus = () => {
bar.classList.toggle('warning', !navigator.onLine);
};
window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);
updateStatus(); // 初始化
</script>
更可靠的做法：结合请求失败显式触发警告态
仅依赖 navigator.onLine 容易误判（比如 WiFi 连着但无外网）。真正需要“警告”的场景，往往发生在某个上传/下载/轮询请求失败之后。这时应由业务逻辑控制进度条状态：
- 发起请求前设置
progress.value = 0，并移除warning类 - fetch 拒绝或超时时，调用
progress.classList.add('warning') - 若后续重试成功，再调用
progress.classList.remove('warning') - 可额外加
title="网络连接异常"或旁白文字提升可访问性
警告样式的 CSS 建议（避免仅靠颜色）
单靠红色背景不够——色觉障碍用户可能无法识别。推荐组合方案：
- 背景色 + 边框色双强调（如
background: #fff2f2; border: 2px solid #e57373;） - 加闪烁动画（慎用，可用
@keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }） - 在 progress 后紧跟一个
<span class="status-text">连接中断</span>，用 JS 控制显隐 - 不要覆盖
progress::-webkit-progress-value的 transition，否则动画会卡顿
断网时的进度条不是“动不了”，而是“该不该继续动”——这个决策权始终在 JS 逻辑里，<progress></progress> 只负责忠实地画出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
