Layui 2.9.10+ 版本支持 loading 参数传 HTML 字符串，如 <i class="layui-icon..."> 配合动画类与内联样式实现自定义加载效果；旧版本仅识别布尔值，需 CSS 覆盖或 JS 手动控制显隐。
loading参数传HTML字符串（2.9.10+版本）
新版layui（v2.9.10起）允许直接把loading配置项设为html字符串，这是最轻量的替换方式，不用写额外css或js逻辑。
它会原样插入到.layui-table-loading容器里，支持图标、文字、动画类——只要Layui内置的layui-icon和layui-anim能用，就能生效。
- 确保你用的是
layui v2.9.10或更高版本，低版本传字符串会被忽略（loading只认布尔值） - 推荐用
layui-icon-loading-1配合layui-anim-rotate layui-anim-loop实现旋转效果 - 别漏掉
style="font-size: 28px; color: #009688;"这类内联样式，否则图标可能太小或颜色不对
table.render({
elem: '#demo',
url: '/api/list',
loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 28px; color: #009688;"></i><p style="margin-top: 8px; font-size: 14px;">数据加载中...</p>',
cols: [[{field: 'name', title: '姓名'}]]
});
覆盖.layui-table-loading样式（全版本兼容）
如果你用的是旧版Layui，或者想彻底接管动画逻辑（比如换GIF、加进度条），就得靠CSS覆盖。Layui在加载时会往表格盒子里插入一个.layui-table-loading节点，所有样式都作用在这个类上。
关键点不是“怎么写动画”，而是“怎么让样式生效”：Layui的默认样式是内联注入的，你的CSS必须有足够权重才能盖过去。
- 把自定义CSS放在
layui.css之后加载（例如在</body>前引入自己的custom.css） - 用
!important强制覆盖背景、颜色、字体大小等基础属性 - 如果想换图标为SVG或图片，直接改
.layui-table-loading i::before的content，或设background-image
.layui-table-loading {
background-color: rgba(255, 255, 255, 0.95) !important;
}
.layui-table-loading i {
font-size: 32px !important;
color: #1E9FFF !important;
}
.layui-table-loading .layui-table-loading-text {
font-size: 14px !important;
color: #666 !important;
}
手动控制loading显隐（需要JS介入）
当你要和业务逻辑强耦合时——比如分页点击瞬间显示、接口报错后停留2秒再隐藏——就不能依赖loading: true自动管理了。得关掉默认行为，自己用DOM操作控制。
核心动作就两个：before回调里插入自定义HTML，done或error里删掉它。注意别重复插入，也别漏掉error分支。
- 设
loading: false，否则Layui会同时渲染两套loading - 插入位置建议用
$(elem).closest('.layui-table-view').prepend(...)，避免定位偏移 - 删除时用
$('.my-custom-loading').remove()，不要只靠hide()，否则残留DOM可能影响后续渲染
table.render({
elem: '#demo',
url: '/api/list',
loading: false,
before: function() {
const $view = $('#demo').closest('.layui-table-view');
$view.prepend('<div class="my-custom-loading"><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i> 正在请求</div>');
},
done: function(res, curr, count) {
$('.my-custom-loading').remove();
},
error: function() {
setTimeout(() => $('.my-custom-loading').remove(), 2000);
}
});
为什么改了CSS但图标还是没变
最常见的失效原因不是代码写错了，而是样式没打到真实节点上。Layui的.layui-table-loading是动态生成的，且父容器（.layui-table-box）默认没有position: relative，导致它的绝对定位脱标，跑到整个页面居中去了——你以为在改表格里的loading，其实改的是悬浮在 viewport 中央的那个。
- 检查表格容器是否设置了固定高度，比如
height: 400px；没高度，.layui-table-box就无法成为定位上下文 - 给
.layui-table-box加position: relative，确保.layui-table-loading的position: absolute有参照 - 用浏览器开发者工具选中那个“加载中”文字，往上逐级看computed styles，确认最终生效的
background、color是不是你写的
真正难调的从来不是怎么写CSS，而是怎么让它准确作用到那个动态生成、又容易脱离文档流的节点上。
