直接添加 animate-spin 类可实现旋转动画，但需配合 w-h 尺寸、inline-block/block 显示方式及 border-t-transparent 等边框类才能正常显示旋转圆环效果。

直接给元素添加 animate-spin 类就能实现旋转动画，但要注意它默认作用于 inline 元素（比如 <span></span>），且需配合尺寸、颜色和 display 控制才能正常显示。

确保元素有明确的宽高和块级表现

animate-spin 本身只定义旋转动画，不设置尺寸或显示方式。如果用在默认 inline 的标签（如 <span></span> 或 <i></i>）上，可能看不到旋转——因为 inline 元素没有宽高，旋转“看不见”。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 加 w-5 h-5（或 w-6 h-6）设定大小
• 加 inline-block 或 block 让尺寸生效
• 常用组合：w-5 h-5 inline-block animate-spin

控制颜色和边框样式

Tailwind 的 animate-spin 依赖 border 实现旋转效果（本质是旋转一个带 border 的圆形）。所以通常搭配 border-2 和 border-t-transparent 等类，做出“只有顶部边框可见”的圆环效果。

• 基础旋转圆环：w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin
• 灰色细环：w-4 h-4 border border-gray-300 border-t-transparent rounded-full animate-spin
• 注意：border-t-transparent 让顶部透明，其余三边有色，形成单色旋转环

适配不同场景的写法示例

可以直接用 <div>，也可以封装成按钮中的加载状态。 <ul> <li>独立图标：<code class="bg-gray-100 px-1 rounded"><div class="w-6 h-6 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>

按钮中内联加载：<button class="flex items-center gap-2"><span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>加载中</button>

避免闪烁：确保父容器有明确高度，或加 flex-shrink-0 防止缩放变形

自定义动画时长或缓动（可选）

Tailwind 默认 animate-spin 是 1s 线性旋转。如需更慢/更快，可覆盖 CSS 或用插件扩展。

• 临时调整：加 [animation-duration:1.5s]（Tailwind v3.3+ 支持任意值）
• 或写自定义类：animate-spin-slow，在 CSS 中定义 @keyframes spin-slow { to { transform: rotate(360deg); } }
• 不推荐改默认 animate-spin，保持一致性更稳妥