如何重构CSS实现单页渲染多个CSS Loaders？

嘿，别担心，这绝对是新手刚接触CSS组件化时会遇到的典型问题——很多现成的加载器代码为了简化演示，会用全局定位或者依赖页面根元素的上下文，导致多个实例挤在一起重叠。我来帮你把代码重构为可复用的独立组件，让每个加载器都能乖乖待在自己的位置！

问题根源分析 #

原加载器代码大概率是直接给加载器元素设置了position: absolute，但没有给它的父容器设置position: relative作为定位上下文，或者甚至用了body这类全局元素的伪元素来实现动画——这样所有加载器都会默认相对于整个页面定位，自然就重叠了。

重构方案：组件化封装加载器 #

我们要做的就是把加载器封装成一个独立的“组件”，每个组件拥有自己的定位上下文，彼此互不干扰。

1. 重构后的HTML结构 #

给每个加载器套一个独立的容器，让容器成为加载器的定位基准：

<!-- 第一个加载器 -->
<div class="loader-wrapper">
  <div class="custom-loader"></div>
</div>

<!-- 第二个加载器 -->
<div class="loader-wrapper">
  <div class="custom-loader"></div>
</div>

2. 重构后的CSS代码 #

把加载器的样式完全封装在组件类里，确保每个实例的定位都基于自己的容器：

/* 加载器容器：提供定位上下文和布局空间 */
.loader-wrapper {
  position: relative;
  width: 50px; /* 可根据需求调整加载器大小 */
  height: 50px;
  margin: 1rem; /* 给每个容器加间距，避免拥挤 */
  /* 可选：如果需要让加载器在容器内居中，可加下面两行 */
  /* display: flex; */
  /* align-items: center; justify-content: center; */
}

/* 加载器核心样式 */
.custom-loader {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 动画伪元素：相对于.custom-loader定位 */
.custom-loader::before,
.custom-loader::after {
  content: "";
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left: 0 */
  border-radius: 50%;
  border: 3px solid transparent;
  animation: loader-spin 1.4s linear infinite;
}

/* 调整原加载器的动画细节（保留原效果） */
.custom-loader::before {
  border-top-color: #2563eb;
}
.custom-loader::after {
  border-bottom-color: #ef4444;
  animation-delay: 0.7s;
}

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

为什么这样改能解决问题？ #

• .loader-wrapper设置了position: relative，它内部所有position: absolute的元素（也就是加载器的伪元素）都会相对于这个容器定位，而不是整个页面。
• 每个加载器都有独立的容器，通过margin可以轻松控制它们之间的间距，布局更灵活。
• 所有样式都用类选择器封装，不会污染全局样式，也不会和页面其他元素冲突。

额外优化建议 #

• 如果你需要不同大小的加载器，只需要调整.loader-wrapper的width和height即可，加载器会自动适配容器尺寸。
• 如果要把加载器放在页面的特定位置（比如居中、侧边），只需要调整.loader-wrapper的布局（比如用Flexbox、Grid或者position: fixed），不会影响其他加载器实例。

这样改完之后，你想在页面里放多少个加载器都可以，它们都会各自独立显示，再也不会重叠啦！

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