本文介绍如何在 jQuery AJAX 请求期间，通过纯 CSS 实现全页面灰色遮罩 + 居中加载动画，无需修改 HTML 结构，仅扩展原有 #loader 样式即可达成专业级视觉反馈效果。
本文介绍如何在 jquery ajax 请求期间，通过纯 css 实现全页面灰色遮罩 + 居中加载动画，无需修改 html 结构，仅扩展原有 `#loader` 样式即可达成专业级视觉反馈效果。
在 Web 开发中，当执行异步请求（如 AJAX）时，为避免用户重复操作或误触界面，常需对整个页面进行视觉“禁用”——即呈现灰度遮罩（overlay）并突出显示加载指示器。许多开发者倾向于新增一个
元素配合 #loader 使用，但其实可通过巧妙利用 box-shadow 的超大扩散半径，在不改动 HTML 结构的前提下，让单个 #loader 元素同时承担“遮罩层”与“加载图标”双重角色。
核心思路是：将 #loader 的 box-shadow 水平与垂直偏移设为 0，模糊半径设为足够覆盖视口的值（如 100vw），并设置与遮罩一致的背景色（如 #aaa），使其阴影“撑满”整个可视区域，形成灰底效果；同时保持其自身尺寸与动画不变，确保加载图标仍清晰居中。
以下是优化后的完整 CSS 代码（兼容现代浏览器及 Safari）：
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 9999; /* 确保高于所有内容 */
width: 120px;
height: 120px;
margin: -60px 0 0 -60px; /* 修正：原 margin 计算有误，应为 -height/2 和 -width/2 */
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
animation: spin 2s linear infinite;
background: #aaa; /* 遮罩主色（可调） */
box-shadow: 0 0 0 100vw #aaa, 0 0 0 100vh #aaa; /* 双向扩展，确保全屏覆盖 */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}✅ 关键修正说明：
- margin 值已从 -76px 修正为 -60px（-120px / 2），确保真正居中；
- z-index 提升至 9999，防止被其他绝对定位元素遮挡；
- box-shadow 同时指定 100vw 与 100vh 扩散，规避某些浏览器对单方向 100vw 渲染不全的问题；
- 移除了冗余的 -webkit- 前缀（现代项目建议使用 Autoprefixer 自动处理）。
配套的 jQuery 控制逻辑保持简洁，无需任何变更：
$(document).ajaxStart(function() {
$("#loader").show();
});
$(document).ajaxStop(function() {
$("#loader").hide();
$('#cancelBtn').removeAttr('hidden');
});⚠️ 注意事项：
- 此方案依赖 box-shadow 渲染，极低版本浏览器（如 IE9 及以下）不支持，若需兼容旧环境，建议改用传统 overlay + loader 双元素结构；
- 若页面存在 overflow: hidden 或 transform 触发新层叠上下文的父容器，可能影响 box-shadow 渲染范围，此时需将 #loader 直接挂载到 下（可通过 $('body').append('') 动态注入）；
- 颜色 #aaa 可根据设计系统调整为 rgba(0,0,0,0.5) 等半透明灰，增强层次感，但需注意 box-shadow 对 rgba 的支持更广泛。
该方法轻量、高效、语义清晰，是提升用户体验与代码简洁性的实用技巧。
