layer.load 的 content 参数需配合 success 回调调整文字位置，推荐用 padding-top 下移文字避开图标重叠；浅色遮罩下须同时修改文字颜色和图标 filter 以确保可见性；shade 必须为数组格式（如 [0.2, '#000']）才生效。
layer.load 的 content 参数能直接显示文字，但默认会和 loading 图标重叠
直接传 content: '正在提交' 是最简方式，但 layui 默认把文字塞进同一个 .layui-layer-content 容器里，而 loading 图标（.layui-layer-loading1）也在这里渲染，结果就是文字压在图标上、看不清、排版乱。
真正起效的做法是：用 success 回调拿到 DOM，手动调整文字位置和样式。关键不是“加文字”，而是“把文字从图标底下揪出来”。
-
content仍要传，它是触发文字渲染的前提 - 必须用
success钩子，不能靠 CSS 全局覆盖 —— 因为 layer 每次新建 load 层都会动态生成 class 名，且图标和文字共用一个父容器 - 常见错法：
layer.load(2, { content: '加载中' })单独写，不配success，结果文字糊在旋转图标正中间
用 success 调整文字位置时，padding-top 是最稳的方案
图标的 SVG 是绝对定位或 inline-block，文字是行内元素，默认垂直对齐基线。强行用 margin 或 transform 容易在不同 icon 类型（1/2/3）下失效，而 padding-top 直接撑开容器内部空间，让文字自然下移，兼容性最好。
示例：
layer.load(2, {
shade: [0.2, '#000'],
content: '请稍候...',
success: function(layero) {
layero.find('.layui-layer-content').css({
'padding-top': '50px',
'width': '180px',
'color': '#fff',
'text-align': 'center'
});
}
});
-
padding-top值需根据 icon 类型微调：icon=1（小圆圈）一般 40–45px；icon=2（大圆圈）建议 50–60px；icon=3（齿轮）可能要 70px+ - 务必设
width，否则文字过长会换行，破坏居中效果 - 浅色遮罩（如
[0.1, '#fff']）下，记得同步改color，否则白底白字看不见
想让文字出现在图标下方（而非包裹图标），得用 after() 插入新 DOM
上面的 padding-top 方案本质是“图标不动、文字下移”，如果 UI 要求图标居中、文字严格在正下方（比如带间距的卡片式 loading），就得绕过原有结构，手动追加一个独立 <div>。
<p>示例：</p>
<pre class="brush:php;toolbar:false;">layer.load(2, {
shade: [0.3, '#000'],
success: function(layero) {
layero.find('.layui-layer-content').after(
'<div class="layer-load-text" style="color:#fff;text-align:center;margin-top:12px;font-size:14px;">数据处理中...</div>'
);
}
});</pre>
<ul>
<li>不用依赖 <code>content 参数，文字完全由 JS 注入，彻底脱离原生布局逻辑
margin-top 控制图标与文字间距，避免紧贴div 需额外加样式，不能指望全局 class 生效
shade 设成白色或浅色时，.layui-layer-loading1 图标会变淡甚至消失
这是 Layui 的设计缺陷，不是你代码写错。深色 loading 图标（SVG fill="#333"）在 shade: [0.1, '#fff'] 这种浅背景上，对比度极低，肉眼几乎不可见。
必须在 success 里手动重置图标样式：
success: function(layero) {
// 调整文字
layero.find('.layui-layer-content').css({ 'padding-top': '50px', 'color': '#333' });
// 同时翻转图标颜色
layero.find('.layui-layer-loading1').css({
'filter': 'invert(1) brightness(1.5)',
'width': '40px',
'height': '40px'
});
}
-
filter: invert(1)是最轻量的翻色方案，对 SVG 和 PNG 都有效；brightness补偿反色后可能偏暗的问题 - 别只调文字不调图标 —— 白底黑字 + 白底隐形图标，用户只会看到一行字，不知道有 loading 动画
- 某些旧版 Chrome 对 SVG filter 支持不稳定，可备选方案：用
background-image替换整个 loading 区域，但工作量翻倍
shade 必须是数组格式，写成 shade: 0.2 或 shade: true 就完全不生效，遮罩永远是默认黑灰。这个坑没有报错，只能靠调试器看 computed style 确认是否真的 applied。
