CSS Loaders，在页面上呈现多个

Question

这可能是个愚蠢的问题；我是 CSS 的新手，非常感谢任何帮助。

我在这里找到了一个不错的 CSS 加载器 https://codepen.io/tstoik/pen/Ywgxqb

它工作得很好，除了我似乎每页只能呈现一个加载器(或者更确切地说，如果我有多个加载器，它们会在彼此之上呈现)。我如何重构 CSS 以便在一个页面上可以有多个加载器？

例如:

<div class="loader"></div>
<div>
    ...some content
</div>
<div class="loader"></div>

上面的示例将两个加载器呈现在彼此之上(我相信)，看起来实际上只有一个加载器。

.loader:before, .loader:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  border-top-color: #ECD078;
  border-right-color: #C02942;
  border-bottom-color: #542437;
  border-left-color: #53777A;
  content: '';
  transform: translate(-50%, -50%);
  animation: rotate 1.5s  infinite ease-in-out;
}
.loader:before {
  border-width: 5vh;
}
.loader:after {
  width: 15vh;
  height: 15vh;
  border-width: 1vh;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

谢谢!

Answer 1

@chriskirknielsen 的回答

添加 .loader { position:relative； } 完美运行。