animate-spin 实现 loading 旋转需元素有尺寸和边框，常见失效原因包括无宽高、缺边框、父容器溢出隐藏或 flex 压缩；样式靠边框组合实现圆环等效果，性能依赖 transform，低版本 safari 可能卡顿，且不支持逆时针及自定义中心点。
animate-spin 能直接实现 Loading 旋转动画，但默认只作用于内联元素（如 span、i），且依赖 border 构建视觉形状——纯色块或图标不会动，得靠边框“画”出旋转体。
为什么加了 animate-spin 却没转？
常见原因不是类名写错，而是元素本身不可见或无尺寸：
-
div默认无宽高，需显式设width/height或用aspect-square - 没加
border（或border-t等单边）时，旋转的是“透明框”，肉眼不可见 - 父容器设置了
overflow: hidden，而旋转元素超出边界被裁剪 - 用了
flex布局但子项未设shrink-0，导致动画元素被压缩失形
如何用 animate-spin 画出不同样式的旋转 Loading？
核心是控制边框样式和颜色组合，不是改动画本身：
- 圆环：用
border-4 border-gray-300 border-t-blue-500 rounded-full—— 底色灰，顶边蓝，rounded-full让四边融合成环 - 点状加载（小圆点绕圈）：需配合伪元素或额外元素，
animate-spin本身不支持多点；它只转整个元素 - 图标旋转（如
svg或icon）：直接加animate-spin即可，但注意svg需设inline-block或固定尺寸，否则可能塌陷
示例（最小可用圆环）：
<span class="inline-block w-6 h-6 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></span>
animate-spin 的性能和兼容性要注意什么？
它本质是 transform: rotate(360deg) 的 @keyframes，所以：
- 在低配安卓 WebView 或 iOS Safari 13 以下可能卡顿，避免在长列表每个项里都用
- 动画默认用
ease缓动，若要匀速旋转，需覆盖 CSS：.my-spinner { animation-timing-function: linear; } - 无法控制旋转方向（默认顺时针），要逆时针得自定义 keyframes，不能只靠 Tailwind 内置类
- SSR 场景下，服务端渲染时
animate-spin不生效（无 JS），但不影响首屏结构，只是动画延迟到客户端挂载后才启动
真正容易被忽略的点：旋转动画的“中心点”默认是元素盒模型中心，如果元素有 padding 或 margin 不对称，视觉上会偏移；用 translate-x-0 translate-y-0 无法修正，得靠 transform-origin —— 但 Tailwind 没提供对应工具类，必须手写 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
