应优先使用原生 progress 元素实现语义化进度条，配合纯 css spinner 和 display 控制遮罩层，htmx 场景下用 hx-indicator 声明式管理加载状态。
用 progress 元素做语义化进度条，别硬套 div + CSS 动画
原生 progress 不仅可读性强、自带无障碍支持（屏幕阅读器能识别当前值），而且在多数现代浏览器里渲染稳定、无 JS 依赖。硬用 div 模拟进度条，反而要自己处理 aria-valuenow、aria-valuemin、aria-valuemax，还容易漏掉 focus 管理。
- 有确切进度时直接写：
<progress value="42" max="100"></progress>，value 可动态更新（如 fetch 回调中赋值） - 无确切进度时，省略
value属性：<progress max="100"></progress>，再用 CSS 动画模拟“流动感” - 不要给
progress设固定宽高后又用transform: scale()缩放——某些 Safari 版本会丢掉内部伪元素样式
纯 CSS 实现 spinner，避免 GIF 或 SVG 外链请求
移动端弱网下，GIF 加载失败或 SVG 外链超时会导致 loading 区域空白；而纯 CSS spinner 只需几行样式，零资源请求、主线程零负担。
- 推荐写法：
<div class="spinner" style="width:20px;height:20px;border:2px solid #eee;border-top-color:#007bff;border-radius:50%;animation:spin 1s linear infinite;"></div> - 配套动画必须用
@keyframes spin，且只含transform: rotate()—— 不要用left/top位移，会触发重排 - 禁用
box-shadow、filter、渐变边框等高开销属性，低端安卓机上易掉帧
遮罩层显示/隐藏必须用 display，不是 opacity
opacity: 0 看似平滑，但实际仍占据布局流、响应事件，尤其在 iOS Safari 中常出现“看不见却点得着”的穿透问题。
- 正确做法：初始设
style="display:none"，显隐时切display: flex（或block） - 若需维持下方内容位置不变（比如防止按钮跳动），改用
visibility: hidden+pointer-events: none - 绝对必要：遮罩容器一定要加
style="pointer-events: none"，否则用户可能误触底层按钮 - 不要等
DOMContentLoaded才隐藏遮罩——页面刚加载时就该立刻document.getElementById('loading').style.display = 'none'
HTMX 场景下优先用 hx-indicator，而非全局 JS 监听
HTMX 的 hx-indicator 是声明式、生命周期精准的方案。全局监听 htmx:afterRequest 容易漏掉 abort、timeout 或服务端重定向导致的状态错乱。
- 写法示例：
<button hx-post="/api/save" hx-indicator="#save-spinner">保存</button><span id="save-spinner" class="htmx-indicator">●</span> - 自定义样式时，务必覆盖
.htmx-request .htmx-indicator，而不是只写.htmx-indicator—— 否则默认opacity: 0会干扰你的display控制 - 多个并发请求时，不同按钮应指向不同
id的指示器，避免互相覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
