CSS加载器，在页面上呈现多个 [英] CSS Loaders, render multiple on a page

问题描述

这可能是一个愚蠢的问题；我是CSS的新手，任何帮助将不胜感激.

This is probably a silly question; I'm new to CSS, and any help would be much appreciated.

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

I found a nice CSS loader here https://codepen.io/tstoik/pen/Ywgxqb

它工作得很好，除了似乎我每页只能渲染一个加载程序(或者，如果我有多个加载程序，它们会在彼此之上渲染).如何重组CSS，以便一个页面上可以有多个加载器?

It works quite nicely, except it seems that I can only render a single loader per page (or rather, that if I have multiple loaders, they render on top of each other). How can I restructure the CSS so I can have multiple loaders on a page?

例如:

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

上面的示例将两个加载器相互叠加(我相信)，似乎实际上只有一个.

The above example renders the two loaders on top of each other (I believe), making it seem that there is really only a single one.

.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);
  }
}

谢谢！

推荐答案

@chriskirknielsen的答案

Answer from @chriskirknielsen

添加.loader {位置:相对；}效果很好.

Adding .loader { position: relative; } works perfectly.

这篇关于CSS加载器，在页面上呈现多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！