如何用Tailwind CSS实现加载动画-css教程-PHP中文网

animate-spin 可快速实现旋转加载动画，但需作用于 inline 或 inline-block 元素并显式设置宽高与 border-t-transparent；可自定义速度和缓动曲线；推荐用 @apply 封装状态样式，注意顺序与兼容性。

如何用tailwind css实现加载动画

用 `animate-spin` 快速实现旋转加载动画

直接加 animate-spin 类就能让元素转起来，但得注意它只对 inline 元素（比如 span）或设置了 display: inline-block 的元素生效。常见错误是套在 div 上却没设宽高，结果看不见旋转——因为默认 div 没内容、没尺寸，转了个寂寞。

实操建议：

优先用带语义的内联元素，比如 <span class="inline-block w-5 h-5 animate-spin border-2 border-blue-500 border-t-transparent rounded-full"></span>
别依赖父容器撑开尺寸，显式写 w-5 h-5 或类似尺寸类
border-t-transparent 是关键：只保留单色边框的顶部透明，其他三边有颜色，才能看出旋转效果
避免在文字按钮里直接加 animate-spin，会把文字也转走；应该用伪元素或额外 span 插入图标位

自定义旋转速度与缓动曲线

Tailwind 默认的 animate-spin 是 1s 线性旋转一圈，实际项目中常需要更快、更顺或配合品牌节奏。它底层基于 @keyframes spin，所以得改配置才能调速或换缓动。

修改方式（tailwind.config.js）：

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 2s linear infinite',
        'spin-ease': 'spin 0.6s cubic-bezier(0.34, 1.13, 0.66, 1.03) infinite',
      }
    }
  }
}

之后就能用 animate-spin-slow 或 animate-spin-ease。注意：cubic-bezier 值不能写错，否则动画失效；且 Tailwind 不校验 keyframes 名是否真实存在，拼错也不会报错，只会静默不转。

用 `@apply` 组合动画做「加载中」按钮状态

纯 CSS 类组合容易失控，比如同时加 animate-spin 和 opacity-50 可能被覆盖。更稳的方式是在组件内用 @apply 封装完整状态样式。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

例如一个禁用态加载按钮：

.btn-loading {
  @apply flex items-center justify-center px-4 py-2 bg-blue-600 text-white cursor-not-allowed;
  @apply animate-spin;
  @apply opacity-75;
}

要点：