TailwindCSS animate-spin动画生效但加载图标不显示问题求助

你的核心问题是SVG标签是空的——没有任何图形路径或形状元素，所以即使animate-spin动画在运行，也没有可渲染的内容，自然看不到图标。下面是几种直接可行的解决方案：

方案1：添加完整的内联SVG加载图标 #

给SVG补充标准的加载图形路径，同时用currentColor继承按钮的白色文本颜色，确保和按钮样式统一：

<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
  <button
    type="submit"
    className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
  >
    <svg className="animate-spin h-5 w-5 mr-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    Loading...
  </button>
</div>

方案2：直接使用daisyUI内置的Spinner组件 #

既然你已经集成了daisyUI，它自带了开箱即用的加载组件，无需手动写SVG：

<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
  <button
    type="submit"
    className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
  >
    <span className="loading loading-spinner loading-white mr-3"></span>
    Loading...
  </button>
</div>

loading-spinner类已经包含旋转动画，loading-white用来设置图标颜色为白色，和按钮文本匹配。

补充说明 #

你之前尝试的移除border-transparent、调整background-color等操作，只是修改了容器或SVG的背景样式，但SVG本身没有图形内容，所以只能看到背景方块，而非真正的加载图标。只要给SVG添加图形元素（或用daisyUI的组件），就能正常显示旋转的加载状态了。

内容的提问来源于stack exchange，提问作者disposable-kiwi