看起来你已经搞定了旋转动画的部分，但差了全屏覆盖和垂直居中的关键样式！你的当前代码里，外层的div只是设置了水平居中，但它的高度只由内部SVG决定，而且没有固定定位来占满整个页面，所以才会只在顶部显示。

下面是修改后的完整实现，直接替换你的代码就能用：

<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <svg className="animate-spin w-8 h-8 border-4 border-gray-200 border-t-blue-600 rounded-full" 
       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  </svg>
</div>

关键样式解释： #

• fixed inset-0：把容器固定在视口的四个边缘，强制它占满整个屏幕空间
• bg-black/50：添加半透明黑色背景，既可以突出加载动画，也能阻止用户点击背后的内容
• flex items-center justify-center：同时实现水平+垂直居中，你的原代码只加了水平居中，缺少垂直方向的设置
• z-50：给容器设置较高的层级，确保它能覆盖在页面其他内容之上

如果你想保留你原来的SVG内部结构（circle和path），记得给path补上d属性（否则不会显示），修改后的代码如下：

<div className="fixed inset-0 bg-white/90 flex items-center justify-center z-50">
  <svg className="animate-spin w-8 h-8 border-4 rounded-full text-blue-600" 
       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>
</div>

这样调整后，加载动画就会全屏居中显示，并且覆盖整个页面啦！

内容的提问来源于stack exchange，提问作者cllevio123