loaders.css 动画不显示的根本原因是仅提供css类名和关键帧，需手动添加loader基础类、设置宽高和display属性；必须用class=”loader 具体类名”，避免命名冲突，自定义需覆盖background-color或尺寸样式，联动js应通过classlist切换并避免display:none。
Loaders.css 为什么加载不出来动画
常见现象是引入后元素没动，控制台也没报错。根本原因是 loaders.css 只提供 CSS 类名和关键帧定义，不自动绑定 dom 元素——你得手动加类、设尺寸、给 display 属性。
- 必须给元素显式设置
width和height（多数 loader 对尺寸敏感，比如ball-pulse在 0×0 下不可见） - 确保元素不是
display: inline（默认 span/p 等会忽略 width/height），推荐用display: inline-block或block - 检查是否漏了基础类：
loader是通用重置类，几乎所有动画都需要它配合具体 loader 类（如loader ball-pulse） - 如果用构建工具（webpack/Vite），确认 CSS 已被正确 import 或 link，而非仅放在 HTML 里但路径 404
如何选对 loader 类名并避免命名冲突
loaders.css 里每个动画对应一个独立类名（如 line-scale、ball-rotate），但它们都依赖同一套 @keyframes 和基础样式。直接全局引入容易和项目已有 loader 类冲突。
- 不要只写
class="ball-pulse"，务必带上loader基础类：class="loader ball-pulse" - 若项目已用
loader表示其他含义，可局部作用域化：用 CSS Modules 或加前缀（如my-loader），但需同步修改 keyframes 引用名（loaders.css不支持开箱即用的命名空间） - 移动端要注意：部分 loader（如
ball-grid-beat）用大量伪元素+绝对定位，在 ios safari 低版本有渲染抖动，建议在真机测试
自定义颜色和大小时改哪些 CSS 变量或规则
loaders.css 本身不提供 CSS 变量，所有样式靠硬编码。想换色或缩放，得覆盖关键属性。
- 改颜色：覆盖
.loader或具体 loader 类的background-color（如.ball-pulse > div的背景色） - 改大小：调整父容器
width/height，或直接改 loader 内 div 尺寸（如.ball-pulse > div { width: 12px; height: 12px; }） - 注意动画节奏：多数 loader 用
animation-duration控制快慢，修改时保持比例（例如把1.4s改成0.7s会让动画快一倍，但可能显得突兀）
和 JavaScript 状态联动的最小安全写法
纯 CSS loader 没有“启动/停止”API，靠 class 切换来控制显隐，但直接 remove 类可能导致动画卡在中间帧。
立即学习“前端免费学习笔记（深入）”；
- 显示时：先加
loader类，再加具体动画类（如ball-pulse），确保样式层叠顺序正确 - 隐藏时：用
classList.replace('ball-pulse', 'loader')或先移除动画类，再等requestAnimationFrame后移除loader类，避免视觉残留 - 避免用
display: none瞬间隐藏——这会中断动画；优先用visibility: hidden+opacity: 0配合 transition
复杂点在于 loader 类名和 DOM 结构强耦合，换一个 loader 就得同步改 JS 里的 class 操作逻辑。别指望它像 React Spinner 那样自动适配状态。