Layui 2.9.10+ 版本支持 loading 参数传 HTML 字符串,如 配合动画类与内联样式实现自定义加载效果;旧版本仅识别布尔值,需 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之后加载(例如在











