css animations - CSS Loaders, render multiple on a page

Question

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

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

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?

For example:

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

Thanks!

Answer 1

Answer from @chriskirknielsen

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