应用加载器组件开发：加载内容随加载器旋转问题问询

这个问题很常见——你把spin动画直接应用在了承载加载内容的#maincontainer容器上，导致内部的内容元素继承了容器的旋转属性，跟着转圈了。下面提供两种可靠的解决方案：

方案1：分离旋转边框与加载内容（推荐） #

核心思路是把负责旋转的边框元素和加载内容元素拆分开，让动画只作用在边框上，内容单独居中放置，结构更清晰且无额外动画开销。

调整后的HTML结构 #

<div id="app">
  <!-- 仅负责旋转的边框容器 -->
  <div id="spinner"></div>
  <!-- 独立的加载内容 -->
  <div id="loading-text">加载中...</div>
</div>

对应的CSS代码 #

#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  /* 使用Flex布局快速居中所有元素 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9); /* 可选：加半透明背景遮挡页面 */
}

#spinner {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  /* 仅给边框容器应用旋转动画 */
  animation: spin 2s linear infinite;
}

#loading-text {
  margin-top: 16px; /* 和旋转边框拉开间距 */
  font-size: 18px;
  color: #333;
}

/* 旋转动画定义 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

方案2：通过反向动画抵消旋转（无需改HTML结构） #

如果不想调整现有HTML结构，可以给内部的加载内容添加一个反向旋转的动画，抵消父容器的旋转效果：

修改后的CSS代码（基于你的原有结构） #

#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#maincontainer {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
}

/* 新增：给内部加载内容添加反向旋转 */
#maincontainer .loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 先居中，再通过反向动画抵消父容器的旋转 */
  transform: translate(-50%, -50%);
  animation: spin 2s linear infinite reverse;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

说明 #

这里的reverse关键字会让动画反向运行，刚好抵消父容器的正向旋转，让内容保持静止。

内容的提问来源于stack exchange，提问作者Arunprasanth K V